webcomponents / webcomponents/polyfills

[ShadyDOM] Shadow DOM is not scoped and elements doesn't get `style-scope` when template is cloned after CE definition

Open
#77 4 comments 3 reactions 0 assignees View on GitHub
Package: shadycss Package: shadydom Severity: Medium Type: Bug wontfix
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.