Supercharging Built-In Elements With Web Components 'is' Easier Than You Think

This article explores a powerful aspect of web components: customizing built-in HTML elements. While we've previously covered creating custom elements, this technique enhances existing elements, providing benefits like improved SEO and accessibility. It's similar to creating fully independent elements, but with key differences.

Article Series:

• Web Components Are Easier Than You Think
• Interactive Web Components Are Easier Than You Think
• Using Web Components in WordPress is Easier Than You Think
• Supercharging Built-In Elements With Web Components “is” Easier Than You Think (You are here)
• Context-Aware Web Components Are Easier Than You Think
• Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think

The is attribute transforms a standard element into a web component. This leverages the element's inherent structure and features while adding custom functionality. Search engines and screen readers readily understand standard elements, making this approach more accessible than creating entirely new, custom tags.

Important Note: Safari and some less common browsers only support fully independent custom elements, not this built-in element customization. We'll address polyfills later.

Let's refactor the <apocalyptic-warning></apocalyptic-warning> element from a previous article as a customized built-in element. The core change involves extending a specific element (e.g., HTMLDivElement) instead of the generic HTMLElement, and adding { extends: 'div' } to customElements.define().

customElements.define(
  "apocalyptic-warning",
  class ApocalypseWarning extends HTMLDivElement {
    constructor() {
      super();
      let warning = document.getElementById("warningtemplate");
      let mywarning = warning.content;
      this.attachShadow({ mode: "open" }).appendChild(mywarning.cloneNode(true));
    }
  },
  { extends: "div" }
);

The HTML changes from <apocalyptic-warning></apocalyptic-warning> to <div is="apocalyptic-warning">. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div is=&quot;apocalyptic-warning&quot;&gt; Undead &lt;/div&gt;</pre><div class="contentsignin">Copy after login</div></div> <p>Remember: Safari users won't see the web component enhancements.</p> <p>Only specific elements support shadow DOM. Security considerations limit this to layout elements like <code><div>, <code><nav></nav>, <main></main>, etc., text elements like <h1></h1> to <h6></h6>, and the element. Autonomous custom elements are also included.

Creating a web component doesn't always require shadow DOM. Let's build an image with a built-in lightbox to illustrate this. We'll use the is attribute and a data attribute (data-lbsrc) for the larger image.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174243979698755.jpg" class="lazy" alt="Silent but Undeadly Zombie Ninja" data-lb is="light-box">

The JavaScript is streamlined, omitting shadow DOM, templates, and slots:

customElements.define(
  "light-box",
  class LightBox extends HTMLImageElement {
    constructor() {
      super();
      let lb = document.createElement("div");
      lb.style.display = "none";
      lb.style.position = "absolute";
      lb.style.height = "100vh";
      lb.style.width = "100vw";
      lb.style.top = 0;
      lb.style.left = 0;
      lb.style.background = `rgba(0,0,0, 0.7) url(${this.dataset.lbsrc}) no-repeat center`;
      lb.style.backgroundSize = "contain";
      lb.addEventListener("click", () => lb.style.display = "none");
      this.parentNode.insertBefore(lb, this);
      this.addEventListener("click", () => lb.style.display = "block");
    }
  },
  { extends: "img" }
);

To ensure cross-browser compatibility, especially for Safari, we'll use a polyfill. While general polyfills exist, a more targeted approach is often more efficient. Since Safari supports autonomous custom elements, we can create an autonomous <lightbox-polyfill></lightbox-polyfill> element as a fallback. (The code for this polyfill is omitted for brevity but would involve creating a similar lightbox functionality within an autonomous custom element.) Conditional logic would then switch between the customized built-in element and the polyfill based on browser support. This ensures consistent functionality across all browsers. The final step would be to incorporate this conditional logic to use the polyfill only when necessary.

This approach allows for creating customized built-in elements while maintaining semantic HTML and ensuring wider browser compatibility through the use of polyfills.