| Summary: | [CSS Shadow Parts] Bad style sharing between sibling elements with different part attributes | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Justin Fagnani <justinfagnani> | ||||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED FIXED | ||||||||
| Severity: | Major | CC: | emilio, iamkulykov, koivisto, rniwa, simon.fraser, webkit-bug-importer | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | WebKit Nightly Build | ||||||||
| Hardware: | All | ||||||||
| OS: | All | ||||||||
| Bug Depends on: | |||||||||
| Bug Blocks: | 148695 | ||||||||
| Attachments: |
|
||||||||
Setting style attribute, e.g. display, or direction attribute on part="two", also forces the red color to apply. That smells a lot like broken style sharing. Firefox had a somewhat similar bug in fact: https://bugzilla.mozilla.org/show_bug.cgi?id=1604989 Yeah, bet that's the problem. Those spans are obvious style sharing candidates if you forget about 'part'. Created attachment 396079 [details]
patch
Created attachment 396082 [details]
patch
Comment on attachment 396082 [details]
patch
Make sense to me,
Committed r259877: <https://trac.webkit.org/changeset/259877> All reviewed patches have been landed. Closing bug and clearing flags on attachment 396082 [details]. Thanks for the really quick turnaround! A question about the release process for bug fixes like this: will this go out in a patch release on 13.1, or the next big release? ie, will we have to tell developers to use a ::part() polyfill until 13.2? (In reply to Justin Fagnani from comment #10) > A question about the release process for bug fixes like this: will this go > out in a patch release on 13.1, or the next big release? ie, will we have to > tell developers to use a ::part() polyfill until 13.2? It’s unlikely that a bug fix like this makes it to a software update unless there is a major site that’s been actively affected. FYI, this fix is in the current macOS 10.15.6/iOS 13.6 public beta. |
The ::part() selector released in 13.1, and as currently implemented in TP and nightly, is selecting the wrong elements when parts are nested in any container element in a shadow root. Given this DOM: <!-- This div is necessary to trigger the bug --> <div> <span part="one">Should be Blue</span> | <span part="two">Should be Red</span> </div> And these selectors: my-element::part(one) { color: blue; } my-element::part(two) { color: red; } The text spans should be blue then red as described. Instead they are both blue. If the <div> is removed, or if the second <span> is changed to a different tag, the colors are correct. JS Bin: https://jsbin.com/bucejul/3/edit