202176 2019-09-24 15:51:49 -0700 ::first-letter in shadow tree does not apply to the slotted content 2022-04-26 02:04:50 -0700 1 1 1 Unclassified WebKit CSS Safari 12 All All RESOLVED DUPLICATE 220650 InRadar P2 Normal --- 148695 1 dale.sande webkit-unassigned koivisto rniwa simon.fraser vb webkit-bug-importer oldest_to_newest 1573875 0 dale.sande 2019-09-24 15:51:49 -0700 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. 1574240 1 webkit-bug-importer 2019-09-25 15:22:33 -0700 <rdar://problem/55721155> 1575390 2 rniwa 2019-09-30 17:35:21 -0700 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. 1576654 3 dale.sande 2019-10-03 17:20:30 -0700 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`. 1577668 4 380404 rniwa 2019-10-07 23:21:38 -0700 Created attachment 380404 Reduction 1864392 5 koivisto 2022-04-26 02:04:50 -0700 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 *** 380404 2019-10-07 23:21:38 -0700 2019-10-07 23:21:38 -0700 Reduction first-letter.html text/html 270 rniwa PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8Ym9keT4KPGRpdiBpZD0iaG9zdCI+ZGVmYXVsdDwvZGl2 Pgo8c2NyaXB0PgoKY29uc3Qgc2hhZG93Um9vdCA9IGhvc3QuYXR0YWNoU2hhZG93KHttb2RlOiAn Y2xvc2VkJ30pOwpzaGFkb3dSb290LmlubmVySFRNTCA9IGA8c3R5bGU+IGRpdjo6Zmlyc3QtbGV0 dGVyIHsgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsgfSA8L3N0eWxlPgo8ZGl2PjxzbG90Pjwv c2xvdD48L2Rpdj4KYDsKCjwvc2NyaXB0Pgo8L2JvZHk+CjwvaHRtbD4K