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

h2 {
  margin-block: 30px;
  color: red;
  border: 3px solid red;
}

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

import { LitElement, html, css } from "https://esm.sh/lit";

class MyElement extends LitElement {
  static get properties() {
    return {
      header: { type: String },
      content: { type: String }
    };
  }

  render() {
    return html`
      <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);