Bug 202176

Summary: ::first-letter in shadow tree does not apply to the slotted content
Product: WebKit Reporter: Dale Sande <dale.sande>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: koivisto, rniwa, simon.fraser, vb, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 12   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
Reduction none

Dale Sande
Reported 2019-09-24 15:51:49 PDT
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.
Attachments
Reduction (270 bytes, text/html)
2019-10-07 23:21 PDT, Ryosuke Niwa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2019-09-25 15:22:33 PDT
<rdar://problem/55721155>
Ryosuke Niwa
Comment 2 2019-09-30 17:35:21 PDT
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
Comment 3 2019-10-03 17:20:30 PDT
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
Comment 4 2019-10-07 23:21:38 PDT
Created attachment 380404 [details] Reduction
Antti Koivisto
Comment 5 2022-04-26 02:04:50 PDT
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 ***
Note You need to log in before you can comment on or make changes to this bug.