<div class="wrapper">
  <my-custom-element></my-custom-element>
</div>

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
:host {
  background-color: green !important;
}

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
      <style type="text/css">
        :host {
          display: inline-block;
          padding: 2rem;
        }
        :host(my-custom-element){
          background: #ccc;
        }
        .shadow-dom {
          font-size: 20px;
          font-weight: bold;
        }
      </style>
      <div class="shadow-dom">Shadow DOM</div>
    `;
  }
}
customElements.define("my-custom-element", MyCustomElement);