MDN Web Components Examples

The following examples are available in this repository to demonstrate specific Web Component features:

• Event Properties: composed-composed-path demonstrates the Event.composed and Event.composedPath() properties.
• CSS Pseudo-classes: defined-pseudo-class shows the usage of the :defined pseudo-class; slotted-pseudo-element demonstrates the ::slotted pseudo-element.
• Custom Elements (Autonomous):
  • <editable-list>: A list with addable/removable items via list-item attributes or UI interaction.
  • <edit-word>: An element that reveals a text input for editing text when focused.
  • <element-details>: Uses a <template> and <slot> to display element names and descriptions.
  • <popup-info img="" text="">: An info icon that displays a popup via Shadow DOM based on attributes.
  • <simple-template>: A basic demonstration of <template> and <slot> elements.
• Custom Elements (Customized Built-in):
  • <ul is="expanding-list">: An unordered list with expandable/collapsible children (inherits from HTMLUListElement).
  • <word-count>: Counts words inside an element and updates via an interval (inherits from HTMLParagraphElement).
• Lifecycle and Slots:
  • life-cycle-callbacks: Uses <custom-square l="" c=""> to demonstrate lifecycle callbacks through element creation, destruction, and attribute changes.
  • slotchange: Uses <summary-display> to demonstrate the slotchange event and HTMLSlotElement interface by dynamically assigning slot attributes to paragraphs.

This example demonstrates how Event.composed and Event.composedPath() behave when interacting with Shadow DOM boundaries. It defines two custom elements: open-shadow (using an open shadow root) and closed-shadow (using a closed shadow root). An event listener is attached to the html element to log the event's composition status and its propagation path.

// Define an element with an open shadow root
customElements.define('open-shadow',
  class extends HTMLElement {
    constructor() {
      super();
      const pElem = document.createElement('p');
      pElem.textContent = this.getAttribute('text');
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(pElem);
    }
  }
);

// Define an element with a closed shadow root
customElements.define('closed-shadow',
  class extends HTMLElement {
    constructor() {
      super();
      const pElem = document.createElement('p');
      pElem.textContent = this.getAttribute('text');
      const shadowRoot = this.attachShadow({mode: 'closed'});
      shadowRoot.appendChild(pElem);
    }
  }
);

// Listen for clicks on the document to inspect event properties
document.querySelector('html').addEventListener('click', e => {
  console.log(e.composed);
  console.log(e.composedPath());
});

You can use the part attribute on elements within a Shadow DOM to expose them to styling from the outside world via the ::part() CSS pseudo-element. In this implementation, elements inside the shadow root are identified by their part attribute, and their part property is updated dynamically during interaction (e.g., on click) to apply different styles (like an active state).

let template = document.getElementById("tabbed-custom-element");

globalThis.customElements.define(template.id, class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content);

    let tabs = [];
    let children = this.shadowRoot.children;

    for(let elem of children) {
      if(elem.getAttribute('part')) {
        tabs.push(elem);
      }
    }

    tabs.forEach((tab) => {
      tab.addEventListener('click', (e) => {
        tabs.forEach((tab) => {
          tab.part = 'tab';
        });
        e.target.part = 'tab active';
      });
    });
  }
});