Custom element styling

HTML

<my-elem class="open">
</my-elem>

JavaScript

class MyElement extends HTMLElement{
	constructor(){
  	super()
    this.attachShadow({mode: 'open'})
    const headerNd = document.createElement('div')
    headerNd.id = `header`
    const styleNd = document.createElement('style')
    styleNd.textContent =   `
    :host{
      display: block;
      height: 150px;
	  }
    :host(.open){
    	--vchr-color: lightgreen;
    }
    :host(.open):before{
        content: "&nbsp;"
        background: grey;
        opacity:.6;
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
      }
    #header{
      width: 50%;
      margin: auto;
      height:100px;
      background-color: var(--vchr-color, orange);
    }
    
    `
    this.shadowRoot.append(styleNd, headerNd)
  }
}
customElements.define('my-elem', MyElement)