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.
<rdar://problem/55721155>
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.
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`.
Created attachment 380404 [details] Reduction
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 ***