<my-element>
  <h2 slot="header">Header Content</h2>
  <p slot="content">Main Content</p>
</my-element>

/* style our default h2 */
h2 {
  margin-block: 30px;
  color: red;
  border: 3px solid red;
}

/* style our web component parts */
my-element::part(header) {
  border: 3px solid green;
}

class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = `
    <style>
    div {
      border: 3px solid blue;
    }
     </style>
          <div part="header"><slot name="header"></slot></div>
          <hr/>
          <div part="content"><slot name="content"></slot></div>
        `;
  }
}

customElements.define("my-element", MyElement);