Search code examples
javascriptweb-componentshadow-dom

Nested Webcomponents issue

I play with webcomponents using webcomponents.js and Shadydom polyfills.

My code is on Github : https://github.com/olofweb/webcomponents-action-bar

The first webcomponent is my-action-2. It is a button with a title. The second webcomponent is my-action-bar. The goal is to programmatically add my-action-2 into my-action-bar. For this, my-action-bar has an addAction() method who create a new my-action-2 element and add it to the shadow DOM.

The problem is on my-action-2, line 33. Whenmy-action-2 is nested in my-action-bar, then the shadowRoot variable represent the shadow DOM of my-action-bar instead of my-action-2 !

Solution

  • It was a duplicate.

    Github project updated if anyone is interested.