Tips for Styling Shadow DOM Elements

Recently I needed to alter the styles of the placeholders of input and textarea elements in a form. The elements had some awkward styling from Semantic UI which the project uses which were not as per the desired design. The colour of the placeholder text was also changing on focus which was not desired.

When I was trying to track down the cause of the issues I could not determine the styles that were being applied in Chrome's dev tools. I had to turn on the option “Show user agent shadow DOM” in the dev tools settings in order to be able to focus on the placeholder element and insepct its styles.

Now I was able to see what styles were being applied by Semantic UI I needed to make the necessary adjustments in a cross-browser compatible way.

CSS tricks has a great reference on how to style placeholders. I made the mistake of adding all of the vendor-prefixed selectors, comma separated in one ruleset. Then I realised that this would not work because when parsing the ruleset as soon as the browser does not recognise a selector in the list it will abort and not apply that ruleset - separate rulesets must be used for each vendor.

For example:

/* BAD - Browser will abort when it encounters unknown selector of other vendor */
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
    color: grey;
}

/* GOOD - The one selector the browser understands will apply */
::-webkit-input-placeholder {
    color: grey;
}

::-moz-placeholder {
    color: grey;
}

:-ms-input-placeholder {
    color: grey;
}

Now I could apply the styles I needed in a way which worked across different browsers and learned a couple things along the way!