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

[TimvdLippe]

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 <my-element>
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

[TimvdLippe]

Issue still exists: http://jsbin.com/secotoveta/edit?html,output

[adjenks]

Experiencing this issue as well.

[stale[bot]]

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.