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
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.
dfreedm
changed the title
Shadow DOM is not scoped and elements doesn't get style-scope when template is cloned after CE definition
[ShadyDOM] Shadow DOM is not scoped and elements doesn't get style-scope when template is cloned after CE definition
Jun 12, 2019
* clone scripts inside templates
* skip test if template is not supported
* Clone scripts also in nested templates
webcomponents/html-imports#77webcomponents/webcomponentsjs#872
* test with template polyfill
* expand tests for cloned templates
* chai.assert -> assert
* test with fix-template-scripts branch
* cannot exec w/o cloning, remove wrong test
* use template v1.2.1
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
From @tomalec on January 10, 2018 16:10
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
.Copied from original issue: webcomponents/webcomponentsjs#883
The text was updated successfully, but these errors were encountered: