Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[cssom] [css-scoping] Stylesheet title and Shadow DOM #2646

Closed
emilio opened this issue May 6, 2018 · 9 comments
Closed

[cssom] [css-scoping] Stylesheet title and Shadow DOM #2646

emilio opened this issue May 6, 2018 · 9 comments
Labels
css-scoping-1 Current Work cssom-1 Current Work

Comments

@emilio
Copy link
Collaborator

emilio commented May 6, 2018

See the following test-case:

<!doctype html>
<div id="host"></div>
<script>
  host.attachShadow({ mode: "open" }).innerHTML = `
    <style>
      div { color: purple; }
    </style>
    <style title="Foo">
      div { color: green; }
    </style>
    <style title="Bar">
      div { color: red }
    </style>
    <div>Which color am I?
  `;
  console.log(host.shadowRoot.styleSheets[0].title);
  console.log(host.shadowRoot.styleSheets[1].title);
  console.log(host.shadowRoot.styleSheets[2].title);
</script>

For this very simple test-case:

  • Blink shows red (which means that they apply all the stylesheets).
  • WebKit shows green (do they apply the "preferred" sheet per subtree? Or they just tweak the global state?).
  • Gecko shows green because it tweaks the global state, but with patches of mine they'd turn purple. I guess I'll turn it red now, but worth considering this.

Blink also doesn't set the stylesheet title property. @lilles is there any reasoning for that? Looks like a bug to me.

cc @rniwa
@emilio emilio added cssom-1 Current Work css-scoping-1 Current Work labels May 6, 2018
@emilio
Copy link
Collaborator Author

emilio commented May 6, 2018

Looks like WebKit's behavior is intentional, given that the selected and preferred name lives in StyleScope.

So I'll implement out of simplicity Blink's behavior, but happy to change to whatever the WG decides.

@emilio
Copy link
Collaborator Author

emilio commented May 6, 2018

cc @tabatkins, in case you have any opinion on this.

@lilles
Copy link
Member

lilles commented May 7, 2018

See WICG/webcomponents#535

@tabatkins
Copy link
Member

I have no particular opinion, as I've never used title on a stylesheet and don't really understand it. The conclusion from the thread that @lilles linked makes sense to me.

@rniwa
Copy link

rniwa commented May 8, 2018

This was previously discussed at WICG/webcomponents#391

I guess we had a consensus that style element inside a shadow tree shouldn't affect the preferred stylesheet of the document, we didn't agree on whether title is ignored inside a shadow tree or not.

@lilles
Copy link
Member

lilles commented May 8, 2018

@rniwa I think we agreed on that in WICG/webcomponents#535 for which the spec edit was made.

@rniwa
Copy link

rniwa commented May 8, 2018

Ok, sounds like we just have a bug in WebKit then. It appears that this is already addressed by whatwg/html#1675 ? Perhaps CSS OM spec should have a note referring there.

@emilio
Copy link
Collaborator Author

emilio commented May 8, 2018

Yeah, agreed this is not a lack of definition. Probably the SVG spec should also say the same. In any case, I'll leave this open to add a note to CSSOM.

@emilio
Copy link
Collaborator Author

emilio commented May 8, 2018

I'm adding WPTs for this in https://bugzilla.mozilla.org/show_bug.cgi?id=1447009, fwiw.

@emilio emilio closed this as completed in 5cb2170 Oct 26, 2018
@emilio emilio mentioned this issue Jan 8, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-scoping-1 Current Work cssom-1 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@rniwa @tabatkins @lilles @emilio