Web Components Coding Questions

Register a custom element class.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.textContent = "Hello";
  }
}
customElements.define("hello-world", HelloWorld);

Attach an open shadow root.

class Card extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }
}

React to attribute changes.

static get observedAttributes() {
  return ["label"];
}
attributeChangedCallback(name, _old, value) {
  if (name === "label") this.render(value);
}

Render a named slot in shadow DOM.

<slot name="title"></slot>
<slot></slot>

Dispatch a composed custom event.

this.dispatchEvent(
  new CustomEvent("save", { detail: { id: 1 }, bubbles: true, composed: true })
);

Expose a part for external styling.

<button part="trigger">Open</button>

Mark an element as form-associated.

class FancyInput extends HTMLElement {
  static formAssociated = true;
  constructor() {
    super();
    this._internals = this.attachInternals();
  }
}

Apply a Constructable Stylesheet.

const sheet = new CSSStyleSheet();
sheet.replaceSync(":host { display: block; }");
this.shadowRoot.adoptedStyleSheets = [sheet];

Clean up listeners on disconnect.

disconnectedCallback() {
  this.button?.removeEventListener("click", this.onClick);
}

Clone a template into shadow root.

const template = document.getElementById("card-tpl");
this.shadowRoot.append(template.content.cloneNode(true));