dna

Evolution-based components.

Using with ShadowDOM

ShadowDOM is a great spec for Web Components, but it is not widely supported yet.

Btw, some core mixins such as TemplateMixin and StyleMixin will switch to use ShadowDOM API when the bound node has a shadow root. How to setup the shadow root can be different depending to the implementation in use. For @dnajs/core implementation could be something like this:

import { BaseComponent } from '@dnajs/core';

export class ShadowComponent extends BaseComponent {
    connectedCallback() {
        if (!this.node.shadowRoot) {
            this.node.createShadowRoot();
        }
        super.connectedCallback();
    }
}

Note that this snippet is supported by both Custom Elements v0/v1 packages and by @dnajs/idom, but not all implementations have the node property set before the connectedCallback, and not all implementations support ShadowDOM usage (React, for example), so it is impossible (right now) to define a global interoperable strategy.