Closed
Description
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