Bug 170762 - Updating class name of a shadow host does not update the style applied by descendants of :host()
Summary: Updating class name of a shadow host does not update the style applied by des...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Other
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
: 169706 (view as bug list)
Depends on: 158900
Blocks: 148695
  Show dependency treegraph
 
Reported: 2017-04-11 21:28 PDT by Ryosuke Niwa
Modified: 2021-05-03 22:12 PDT (History)
6 users (show)

See Also:


Attachments
patch (15.63 KB, patch)
2017-05-11 08:10 PDT, Antti Koivisto
rniwa: review+
Details | Formatted Diff | Diff
patch (15.96 KB, patch)
2017-05-12 05:03 PDT, Antti Koivisto
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Ryosuke Niwa 2017-04-11 21:28:49 PDT
https://trac.webkit.org/changeset/202227 fixed the case where :host rule applies to itself,
but not any rules that apply styles to its descendants.
Comment 1 Ryosuke Niwa 2017-04-11 21:29:27 PDT
See http://jsbin.com/masaxeq/edit?html,output
Comment 2 Radar WebKit Bug Importer 2017-04-11 21:29:53 PDT
<rdar://problem/31572668>
Comment 3 vpusher 2017-04-18 09:27:40 PDT
Experiencing the same issue with my custom element (game-card) but with an attribute selector:

:host([unrevealed]) #flipper

> We can see the rule appear and match in the dev tools (transform: rotateY...), but the styles are not really applied to the #flipper element (the card should rotate on the Y axis, like it was flipped).

You can inspect it there: https://www.webcomponents.org/element/vpusher/game-card

> Click on the card to toggle the 'unrevealed' attribute on the host, then check the #flipper styles.

The thing is, if you uncheck, then check the rule in the dev tools, it applies properly.

Hope I helped.
Comment 4 Ryosuke Niwa 2017-05-08 18:35:24 PDT
*** Bug 169706 has been marked as a duplicate of this bug. ***
Comment 5 Antti Koivisto 2017-05-11 08:10:07 PDT
Created attachment 309710 [details]
patch
Comment 6 Ryosuke Niwa 2017-05-11 14:17:19 PDT
Comment on attachment 309710 [details]
patch

View in context: https://bugs.webkit.org/attachment.cgi?id=309710&action=review

> Source/WebCore/css/RuleSet.cpp:208
> +    return leftmostSelector->match() == CSSSelector::PseudoClass && leftmostSelector->pseudoClassType() ==CSSSelector::PseudoClassHost;

Nit: Need a space after the second ==.

> Source/WebCore/css/RuleSet.h:218
> +    bool m_hasHostPseudoClassRulesMatchingInShadowTree { false };

You might wanna put this next to another boolean for better packing not that it matters much.

> LayoutTests/fast/shadow-dom/css-scoping-host-class-and-attribute-mutation.html:108
> +test("#host4", "#shadow4", (host) => {
> +   host.setAttribute('id','green');
> +});

Could you also add a variant for modifying ID/class/attribute of a node inside the shadow tree?
Comment 7 Antti Koivisto 2017-05-12 05:03:53 PDT
Created attachment 309889 [details]
patch
Comment 8 WebKit Commit Bot 2017-05-12 05:31:52 PDT
Comment on attachment 309889 [details]
patch

Clearing flags on attachment: 309889

Committed r216761: <http://trac.webkit.org/changeset/216761>
Comment 9 WebKit Commit Bot 2017-05-12 05:31:54 PDT
All reviewed patches have been landed.  Closing bug.
Comment 10 ijaltllu 2021-05-03 22:12:23 PDT Comment hidden (spam)