Bug 202176 – ::first-letter in shadow tree does not apply to the slotted content

• Component: CSS
• Status: RESOLVED DUPLICATE

[Dale Sande]

When styling HTML Custom Elements, I noticed when using the `:first-child` CSS pseudo-class, the rendered concent in Safari (macOS or iOS) does not reflect the style. 

After exhausting all troubleshooting opportunities there doesn't appear to be an issue with :first-child in general with Safari, but only when used inside a custom element. The code and variations thereof have been reviewed on all browsers with the failure only happening in Safari.

This can be validated at http://orion-design.surge.sh/#buttons
The code can be seen at https://github.com/AlaskaAirlines/OrionStatelessComponents__ods-button/blob/master/src/style.scss#L59
The custom element can be installed from https://www.npmjs.com/package/@alaskaairux/ods-button


When using :first-child in an HTML custom element using the shadow DOM ...

I'd expect the first letter to be altered per the style specified in the selector. 

What I see is no effect at all.

[Radar WebKit Bug Importer]

<rdar://problem/55721155>

[Ryosuke Niwa]

Could you elaborate on what's expected and what's the problem in Safari? I can't really tell which one of the buttons on http://orion-design.surge.sh/#buttons has unexpected result.

[Dale Sande]

Going to the URL provided (http://orion-design.surge.sh/#buttons) in Safari, you will see that the `d` in `default` is not capitalized. 

If you look at the same URL in Chrome, Firefox or Edge Dev you will see inside the button the string is `Default`.

[Ryosuke Niwa]

Created attachment 380404 [details]
Reduction

[Antti Koivisto]

Sorry for forward-dupe but looks like 220650 (along with some earlier fixes) makes this work too.

*** This bug has been marked as a duplicate of bug 220650 ***