You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Sep 20, 2019. It is now read-only.
Shadow DOM styles are not scoped for vanilla JS Custom Elements and shadow DOM content does not get style-scope my-element class when element is cloned and stamped after CE definition
Define my-element in the way it attaches open shadow root in constructor or attributeChangedCallback, the shadow root that contains styles and elements.
Clone the template, stamp it to the main document
Expected Results
Styles should get scoped,
Elements should get style-scope my-element class
Actual Results
Styles are not scoped,
Elements didn't get style-scope my-element class
Browsers Affected
Chrome
Firefox
Edge
[?] Safari 9
[?] Safari 8
[?] IE 11
Versions
webcomponents: v1.0.22
Investigation
When element is created:
before upgrade, or
added after upgrade with .innerHTML, or
stamped from a template created after upgrade
elements get style-scope ... class, so are at least scopeable
I tried ShadyCSS.styleElement with no luck.
I suspect ShadyCSS assumes every custom element instance should have the same shadow root what is not true per spec and in my case. https://github.com/webcomponents/shadycss/blob/master/src/scoping-shim.js#L233 early returns early, even though my element has shadowRoot.
The text was updated successfully, but these errors were encountered:
Description
Shadow DOM styles are not scoped for vanilla JS Custom Elements and shadow DOM content does not get
style-scope my-element
class when element is cloned and stamped after CE definitionLive Demo
http://jsbin.com/sekilom/edit?html,output
Steps to Reproduce
<my-element>
my-element
in the way it attaches open shadow root inconstructor
orattributeChangedCallback
, the shadow root that contains styles and elements.Expected Results
style-scope my-element
classActual Results
style-scope my-element
classBrowsers Affected
Versions
Investigation
When element is created:
.innerHTML
, orelements get
style-scope ...
class, so are at least scopeableI tried
ShadyCSS.styleElement
with no luck.I suspect ShadyCSS assumes every custom element instance should have the same shadow root what is not true per spec and in my case. https://github.com/webcomponents/shadycss/blob/master/src/scoping-shim.js#L233 early returns early, even though my element has
shadowRoot
.The text was updated successfully, but these errors were encountered: