webcomponents / webcomponents/polyfills
[ShadyDOM] Shadow DOM is not scoped and elements doesn't get `style-scope` when template is cloned after CE definition
- Dominant language
- HTML
- Stars
- 1.2k
- Forks
- 168
- PR merge metrics
- No merged PRs in 30d
Description
_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 definition
#### Live Demo
http://jsbin.com/sekilom/edit?html,output
#### Steps to Reproduce
1. Create a template with ``
2. Define `my-element` in the way it attaches open shadow root in `constructor` or `attributeChangedCallback`, the shadow root that contains styles and elements.
3. Clone the template, stamp it to the main document
#### Expected Results
1. Styles should get scoped,
2. Elements should get `style-scope my-element` class
#### Actual Results
1. Styles are not scoped,
2. Elements didn't get `style-scope my-element` class
### Browsers Affected
- [ ] Chrome
- [x] Firefox
- [x] 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`.
_Copied from original issue: webcomponents/webcomponentsjs#883_
Contributor guide
Assessment
This issue has not been assessed yet.