[cssom] Need to agree on when LinkStyle.sheet gets updated in shadow trees. #3096

emilio · 2018-09-11T00:25:36Z

Since it's observable via cssRules and all that stuff.

In Gecko, when a shadow host is unbound, we also disconnect the ShadowRoot children. This has side effects, such as losing (only temporarily) the sheet pointer, and losing the disabled state.

I was going to fix this in Gecko, when to my surprise Chrome (which is the only other implementor of ShadowRoot.styleSheets doesn't keep the stylesheets around in disconnected subtrees.

We should agree on when should they be kept.

Test-case (sorry, pretty messy):

<!doctype html>
<div id="host"></div>
<script>
  let host = document.querySelector("#host");
  host.attachShadow({ mode: "open" }).innerHTML = `<style>* { color: red }</style><span>Should not be red</span>`;

  console.log("host.shadowRoot.styleSheets", host.shadowRoot.styleSheets);
  console.log("style.sheet", host.shadowRoot.querySelector('style').sheet);

  let sheet = host.shadowRoot.styleSheets[0];
  console.log("host.shadowRoot.styleSheets[0]", sheet);
  sheet.disabled = true;

  // assert_equals(getComputedStyle(host.shadowRoot.querySelector('span')).color, "rgb(0, 0, 0)");
  document.body.offsetTop;

  host.remove();

  console.log("host.shadowRoot.styleSheets (after removal)", host.shadowRoot.styleSheets);
  console.log("style.sheet (after removal)", host.shadowRoot.querySelector('style').sheet);
  sheet = host.shadowRoot.styleSheets[0];
  console.log("host.shadowRoot.styleSheets[0] (after removal)", sheet);
  console.log("host.shadowRoot.styleSheets[0].disabled (after removal)", sheet ? sheet.disabled : "(no sheet)");

  document.body.offsetTop;
  document.body.appendChild(host);

  document.body.offsetTop;
  let host2 = document.createElement('div');
  host2.attachShadow({ mode: "open" }).innerHTML = `<style>* { color: red }</style><span>Should not be red</span>`;
  console.log("host2.shadowRoot.styleSheets", host2.shadowRoot.styleSheets);
  console.log("style.sheet", host2.shadowRoot.querySelector('style').sheet);
  sheet = host2.shadowRoot.styleSheets[0];
  console.log("host2.shadowRoot.styleSheets[0]", sheet);
</script>

Or online at https://crisal.io/tmp/disabled-shadow.html.

And to be clear I'm fine speccing and implementing the Blink behavior, if we decide that accessing stylesheets in disconnected shadow roots is not worth the churn.

cc @lilles @tabatkins @rniwa

The text was updated successfully, but these errors were encountered:

rniwa · 2018-09-11T02:36:48Z

Hm... Safari seems to clear the disabled-ness so that would be at least consistent. I guess the question is whether the current behaviors of Chrome/WebKit would prevent some important use cases and/or if the behavior is consistent with other scenarios not involving shadow roots. e.g. if we disconnect a subtree containing a style/link element, I presume we'd clear the stylesheet of the element?

emilio · 2018-09-11T12:19:58Z

Right, elements outside of the document have already a null sheet, so I think it's consistent.

rniwa · 2018-09-11T21:32:53Z

Yeah then tying this to connectedness of style / link element probably makes most sense.

emilio · 2018-09-12T09:04:42Z

The tricky part is that this affects ShadowRoot.styleSheets as well. That is, ShadowRoot.styleSheets for a disconnected ShadowRoot would always be empty. But as long as we think that's fine I'm fine with that.

lilles · 2018-09-12T09:14:15Z

So the HTML spec already says that sheets are not loaded/created before they are shadow-including connected, so the host2 in your test-case should certainly not be loaded per spec.

I could not find out from the spec what happens when a link/style is removed, even for non-shadow cases, but tying this to connectedness seems like the reasonable thing here.

css-meeting-bot · 2018-09-12T16:50:19Z

The CSS Working Group just discussed Need to agree on when LinkStyle.sheet gets updated in shadow trees., and agreed to the following:

RESOLVED: Disconnected elements don't have stylesheets

The full IRC log of that discussion

<dael> Topic: Need to agree on when LinkStyle.sheet gets updated in shadow trees.
<dael> github: https://github.com//issues/3096
<dael> emilio: cssom spec the first spec when an element has a stylesheet to html. Html doesn't spec. impl did different things. Gecko loads stylesheets in shadow trees. Blink and webkit don't/ Fine spec webkit and tying loading a sheet to connected to a document. Makes shadowroot stylesheets useless unless root is connected
<dael> emilio: Overall that makes sense. Example a styleelement.sheet is also used when style is not in doc.
<dael> astearns: Any concerns?
<dael> astearns: Makes sense to me
<dbaron> s/used/useless/
<dael> emilio: Fine for me if we get a resolution I'll make edits
<dael> astearns: Proposal: Spec webkit/blink behavior for disconnected shadown roots
<dael> emilio: Disconnected elements don't have stylesheets
<dael> astearns: This goes into html?
<dael> emilio: May need to. I'll discuss with html editors who should spec. it's right now nowhere
<dael> astearns: Prop: Disconnected elements don't have stylesheets
<dael> astearns: Objections?
<dael> Rossen_: Disconnected elements have no stylesheets. If I make an element through OM and make a style element the contents are dropped?
<dael> emilio: Not dropped, but they're not associated.
<chris> what about style elements in the disconnected element? or style attributes?
<dael> Rossen_: Once I merge into main tree style sheet becomes
<dael> emilio: Yes, it's non-null
<dael> Rossen_: There's a temp style sheet not accessible through OM, but it's created and retained for lifetime of subtree
<dael> Rossen_: My assertion is there is an actual style sheet not accessible through OM until element is merged into main tree
<dael> emilio: IN gecko we have no style sheet. We parse when becomes connected
<dael> Rossen_: So you're saying if the stylesheet has external reference you won't download until merged into tree
<dael> emilio: Right. THat's only thing HTML specs.
<dael> Rossen_: Then I'm fine with the proposal. That answers my question
<dael> plinss: If you're creating a custom element you cannot manipulate stylesheet through cssom until connected to document.
<dael> Rossen_: That's current
<dael> emilio: You don't want to trigger loads. Rune said he's in agreement. You can create stylesheet via inner html but can't access via OM
<dael> Rossen_: This is also related to our previous discussions abotu sso on disconnected trees. We'd give them stock style answers was our conclusion so you don't trigger style computation. That's why asked if we'd spec so downloads don't occur until merge with main
<dael> plinss: If I create web component it cannot be made ready until plug into doc
<dael> Rossen_: Correct
<dael> plinss: So I plug it in wait for style to download and parse, get a flash of unstyled and then can manipluate.
<dael> Rossen_: Not defending, but it is the current
<dael> plinss: Do we want this?
<dael> emilio: For small components you use inline styles and defer parsing until you insert it.
<dael> Rossen_: plinss perhaps is alluding to a separate issue that perhaps we need a trigger that forces download when not connected.
<dael> plinss: At least parse and manipulate
<dael> Rossen_: Yeah, this is a fair point.
<AmeliaBR> Remember, there is always <link rel="preload" as="stylesheet" />, which you can add to the main document to trigger a download without applying styles just yet.
<dael> emilio: I think there are proposals in Google for document.tree to allow. Wouldn't work like current style sheets. It's a different API. But I think would address that use case
<dael> plinss: This is something I ran into in the last week or two. I want to set values of custom prop and I can't do it through clean APIs. We should allow authors to manipulate style sheets before connection
<dael> emilio: I thik google proposal address that. I don't think we want current style and link to trigger downloads
<dael> plinss: Understood. Not proposing we change legacy. There is a use case here.
<dael> emilio: File as a sep. issue?
<dael> plinss: Fair enough.
<dael> astearns: plinss do you want to investigate current proposals and file an issue if they're not enough?
<dael> plinss: Yes
<dael> astearns: Proposal: Disconnected elements don't have stylesheets
<dael> astearns: Obj?
<dael> RESOLVED: Disconnected elements don't have stylesheets
<emilio> plinss: https://github.com/WICG/webcomponents/issues/468 is what comes to mind

emilio · 2018-09-12T16:51:28Z

The google proposals I was talking about above are document.createStyleSheet (https://github.com/WICG/construct-stylesheets/) and WICG/webcomponents#468.

…nected. This avoids the issue of triggering stylesheet loads for disconnected stuff and such, and is more consistent with Chrome and WebKit. This is per the recent CSSWG resolution at w3c/csswg-drafts#3096. Differential Revision: https://phabricator.services.mozilla.com/D5699 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1490791 gecko-commit: 71f86120ca35d113a2462b2ffe68bc5accc813e4 gecko-integration-branch: autoland gecko-reviewers: smaug

hayatoito · 2018-09-13T01:44:06Z

We have to update wpt to align that with the conclusion in this issue: https://github.com/web-platform-tests/wpt/blob/master/shadow-dom/ShadowRoot-interface.html#L92

…ow root is connected. r=smaug This avoids the issue of triggering stylesheet loads for disconnected stuff and such, and is more consistent with Chrome and WebKit. This is per the recent CSSWG resolution at w3c/csswg-drafts#3096. Differential Revision: https://phabricator.services.mozilla.com/D5699 --HG-- extra : moz-landing-system : lando

…nected. This avoids the issue of triggering stylesheet loads for disconnected stuff and such, and is more consistent with Chrome and WebKit. This is per the recent CSSWG resolution at w3c/csswg-drafts#3096. Differential Revision: https://phabricator.services.mozilla.com/D5699 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1490791 gecko-commit: 71f86120ca35d113a2462b2ffe68bc5accc813e4 gecko-integration-branch: autoland gecko-reviewers: smaug

hayatoito · 2018-09-13T03:14:53Z

@emilio It looks you have already updated the test. Thanks!

…ow root is connected. r=smaug This avoids the issue of triggering stylesheet loads for disconnected stuff and such, and is more consistent with Chrome and WebKit. This is per the recent CSSWG resolution at w3c/csswg-drafts#3096. Differential Revision: https://phabricator.services.mozilla.com/D5699

…ow root is connected. r=smaug This avoids the issue of triggering stylesheet loads for disconnected stuff and such, and is more consistent with Chrome and WebKit. This is per the recent CSSWG resolution at w3c/csswg-drafts#3096. Differential Revision: https://phabricator.services.mozilla.com/D5699 UltraBlame original commit: 71f86120ca35d113a2462b2ffe68bc5accc813e4

No browser passed the test-case that was linked from the comment. The algorithm was also inconsistent, as it looked at whether the element was in a shadow tree or in the document tree, but it was only specified to be re-run if the element becomes connected or disconnected. The CSSWG discussed this in w3c/csswg-drafts#3096 (comment) and there are WPTs for this.

No browser passed the test-case that was linked from the comment. The algorithm was also inconsistent, as it looked at whether the element was in a shadow tree or in the document tree, but it was only specified to be re-run if the element becomes connected or disconnected. The CSSWG discussed this in w3c/csswg-drafts#3096 (comment) and there are WPTs for this. This also matches the definition of <link rel="stylesheet"> which does use connectedness: https://html.spec.whatwg.org/#link-type-stylesheet

This matches other browsers and w3c/csswg-drafts#3096. It also matches SVGStyleElement and HTMLLinkElement of course. Differential Revision: https://phabricator.services.mozilla.com/D102089 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1687126 gecko-commit: 933b5d98c1bfab4b519998bb91ea16d868b07617 gecko-reviewers: smaug

No browser passed the test-case that was linked from the comment. The algorithm was also inconsistent, as it looked at whether the element was in a shadow tree or in the document tree, but it was only specified to be re-run if the element becomes connected or disconnected. The CSSWG discussed this in w3c/csswg-drafts#3096 (comment) and there are WPTs for this. This also matches the definition of <link rel="stylesheet"> which does use connectedness: https://html.spec.whatwg.org/#link-type-stylesheet

…ts stylesheet. r=smaug This matches other browsers and w3c/csswg-drafts#3096. It also matches SVGStyleElement and HTMLLinkElement of course. Differential Revision: https://phabricator.services.mozilla.com/D102089

This matches other browsers and w3c/csswg-drafts#3096. It also matches SVGStyleElement and HTMLLinkElement of course. Differential Revision: https://phabricator.services.mozilla.com/D102089 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1687126 gecko-commit: 933b5d98c1bfab4b519998bb91ea16d868b07617 gecko-reviewers: smaug

No browser passed the test-case that was linked from the comment. The algorithm was also inconsistent, as it looked at whether the element was in a shadow tree or in the document tree, but it was only specified to be re-run if the element becomes connected or disconnected. The CSSWG discussed this in w3c/csswg-drafts#3096 (comment) and there are WPTs for this. This also matches closer the definition of <link rel="stylesheet"> which does use connectedness (though it uses "browsing-context connected", which is a bit different): https://html.spec.whatwg.org/#link-type-stylesheet

The new version matches implementation reality and CSSWG resolution. The algorithm was also inconsistent, as it looked at whether the element was in a shadow tree or in the document tree, but it was only specified to be re-run if the element becomes connected or disconnected. The CSSWG discussed this in w3c/csswg-drafts#3096 (comment) and http://wpt.live/shadow-dom/ShadowRoot-interface.html tests this. This also matches closer the definition of <link rel="stylesheet">, which does use connectedness (though it uses "browsing-context connected", which is a bit different): https://html.spec.whatwg.org/#link-type-stylesheet

…ts stylesheet. r=smaug This matches other browsers and w3c/csswg-drafts#3096. It also matches SVGStyleElement and HTMLLinkElement of course. Differential Revision: https://phabricator.services.mozilla.com/D102089 UltraBlame original commit: 933b5d98c1bfab4b519998bb91ea16d868b07617

* Editorial: remove redundant "the" * Meta: default branch rename Also correct a broken link. Not even w3.org URLs are that cool. Helps with whatwg/meta#174. * Editorial: clean up calls to "parse a URL" It actually takes a string, so calls should be clear about that. * Review Draft Publication: January 2021 * Simplify <link>s In particular, remove their activation behavior, stop them from matching :link and :visited, and stop suggesting that they be focusable areas. This also includes a slight expansion and rearrangement of the link element's section to make it clearer what hyperlinks created by <link> are meant for, contrasting them to <a> and <area> hyperlinks. Closes whatwg#4831. Closes whatwg#2617. Helps with whatwg#5490. * Meta: remove demos/offline/* (whatwg#6307) These are no longer needed as of e4330d5. * Meta: minor references cleanup Use more HTTPS and drop obsolete HTML Differences reference. * Editorial: anticlockwise → counterclockwise We use en-US these days. Spotted in https://twitter.com/iso2022jp/status/1352601086519955456. * Use :focus-visible in the UA stylesheet See w3c/csswg-drafts#4278. * Editorial: align with WebIDL and Infra * Fix "update a style block" early return The new version matches implementation reality and CSSWG resolution. The algorithm was also inconsistent, as it looked at whether the element was in a shadow tree or in the document tree, but it was only specified to be re-run if the element becomes connected or disconnected. The CSSWG discussed this in w3c/csswg-drafts#3096 (comment) and http://wpt.live/shadow-dom/ShadowRoot-interface.html tests this. This also matches closer the definition of <link rel="stylesheet">, which does use connectedness (though it uses "browsing-context connected", which is a bit different): https://html.spec.whatwg.org/#link-type-stylesheet * Modernize and refactor simple dialogs This contains a small bug fix, in that confirm() and prompt() said "return" in some cases instead of "return false" or "return null" as appropriate. Other notable changes, all editorial, are: * Factoring out repeated "cannot show simple dialogs" steps, which will likely expand over time (see e.g. whatwg#6297). * Separating out and explaining the no-argument overload of alert(). * Passing the document through to the "printing steps", instead of just having them talk about "this Window object". * Meta: add definition markup for MessageEvent * Remove <marquee> events They are only supported by one engine (Gecko). Closes whatwg#2957. * Clarify when microtasks happen * Ignore COEP on non-secure contexts Fixes whatwg#6328. * Editorial: update URL Standard integration * Editorial: only invoke response's location URL once Complements whatwg/fetch#1149. * Track the incumbent settings and active script in Promise callbacks Closes whatwg#5213. * createImageBitmap(): stop clipping sourceRect to source's dimensions It has been found in whatwg#6306 that this was an oversight at the time of its introduction. Current behavior goes against author expectations and no implementer has opposed the change to "no-clip". Tests: web-platform-tests/wpt#27040. Closes whatwg#6306. * Remove CSP plugin-types blocking With Flash not being supported anymore, the CSP directive plugin-types has lost its main reason for being and is being removed from the Content Security Policy specification: w3c/webappsec-csp#456. This change removes references to the relevant algorithm from the Content Security Policy spec. * Meta: set more dfn types A follow-up to: * whatwg#5694 * whatwg#5916 * Editorial: occuring → occurring * Make all plugin-related APIs no-ops Part of whatwg#6003. * Disallow simple dialogs from different-origin domain iframes Closes whatwg#5407. * Revive @@iterator for PluginArray/MimeTypeArray/Plugin @@iterator is implicitly installed by defining an indexed property getter. Since there is no other way to define it exclusively, this restores some methods back to being indexed getters. This fixes an inadvertent observable behavior change in d4f07b8. * Adjust web+ scheme security considerations to account for FTP removal Also, network scheme is now reduced to HTTP(S) scheme. Helps with whatwg#5375, but form submission issue remains. See whatwg/fetch#1166 for context. * Meta: export pause Nobody but XMLHttpRequest take a dependency on this please. You have been warned. Context: whatwg/xhr#311. * Fix typo: ancestor → accessor Fixes whatwg#6374. Co-authored-by: Dominic Farolino <[email protected]> Co-authored-by: Anne van Kesteren <[email protected]> Co-authored-by: Domenic Denicola <[email protected]> Co-authored-by: Emilio Cobos Álvarez <[email protected]> Co-authored-by: Momdo Nakamura <[email protected]> Co-authored-by: Jake Archibald <[email protected]> Co-authored-by: Yutaka Hirano <[email protected]> Co-authored-by: Shu-yu Guo <[email protected]> Co-authored-by: Kaiido <[email protected]> Co-authored-by: Antonio Sartori <[email protected]> Co-authored-by: Michael[tm] Smith <[email protected]> Co-authored-by: Ikko Ashimine <[email protected]> Co-authored-by: Carlos IL <[email protected]> Co-authored-by: Kagami Sascha Rosylight <[email protected]> Co-authored-by: Simon Pieters <[email protected]>

emilio changed the title ~~[cssom] Need to agree on when LinkedStyle.sheet gets updated in shadow trees.~~ [cssom] Need to agree on when LinkStyle.sheet gets updated in shadow trees. Sep 11, 2018

emilio added Agenda+ cssom-1 Current Work labels Sep 11, 2018

css-meeting-bot removed the Agenda+ label Sep 12, 2018

emilio mentioned this issue Sep 12, 2018

Should define when stylesheets are removed. whatwg/html#4029

Open

moz-wptsync-bot mentioned this issue Sep 12, 2018

[Gecko Bug 1490791] Make ShadowRoot stylesheet list work only when the shadow root is connected. web-platform-tests/wpt#12979

Merged

rakina mentioned this issue Sep 13, 2018

Can we use CSSStyleSheets from <style>/<link> in adoptedStyleSheets? WICG/construct-stylesheets#34

Closed

emilio mentioned this issue Apr 25, 2019

ShadowRoot.styleSheets should return an empty StyleSheetList if the shadow root is not connected WICG/webcomponents#526

Open

emilio mentioned this issue Jan 15, 2021

Fix update a style block to match reality and CSSWG resolution. whatwg/html#6294

Merged

3 tasks

moz-wptsync-bot mentioned this issue Jan 18, 2021

[Gecko Bug 1687126] Fix HTMLStyleElement::UnbindFromTree to always remove its stylesheet. web-platform-tests/wpt#27215

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[cssom] Need to agree on when LinkStyle.sheet gets updated in shadow trees. #3096

[cssom] Need to agree on when LinkStyle.sheet gets updated in shadow trees. #3096

emilio commented Sep 11, 2018 •

edited by tabatkins

Loading

rniwa commented Sep 11, 2018

emilio commented Sep 11, 2018

rniwa commented Sep 11, 2018

emilio commented Sep 12, 2018

lilles commented Sep 12, 2018

css-meeting-bot commented Sep 12, 2018

emilio commented Sep 12, 2018

hayatoito commented Sep 13, 2018 •

edited

Loading

hayatoito commented Sep 13, 2018

[cssom] Need to agree on when LinkStyle.sheet gets updated in shadow trees. #3096

[cssom] Need to agree on when LinkStyle.sheet gets updated in shadow trees. #3096

Comments

emilio commented Sep 11, 2018 • edited by tabatkins Loading

rniwa commented Sep 11, 2018

emilio commented Sep 11, 2018

rniwa commented Sep 11, 2018

emilio commented Sep 12, 2018

lilles commented Sep 12, 2018

css-meeting-bot commented Sep 12, 2018

emilio commented Sep 12, 2018

hayatoito commented Sep 13, 2018 • edited Loading

hayatoito commented Sep 13, 2018

emilio commented Sep 11, 2018 •

edited by tabatkins

Loading

hayatoito commented Sep 13, 2018 •

edited

Loading