WebComponent showing simple consumer switching between shadow vs non-shadow DOM

webcomponent-switchable-shadowdom.js

// Encapsulated
// <my-webcomponent shadow></my-webcomponent>

// Inherits page styles
// <my-webcomponent></my-webcomponent>

class MyWebComponent extends HTMLElement {
    constructor() {
        let self = super();

        if(this.hasAttribute("shadow")){
            this.init(this.attachShadow({mode: 'open'}));
        }
        else {
            this.init(self);
        }
    }
    
    init(self){
        // build DOM
    }
}

customElements.define('my-webcomponent', MyWebComponent);