Code Self Study Forum

Web Components

Web components came up in a chat yesterday so I looked into it today. They work in modern browsers now.

Basically, a custom component lets you use your own element like this:


With JavaScript like this:

class Cat extends HTMLElement {
    constructor() {

        const shadow = this.attachShadow({ mode: "open" });

        // The wrapper for the element
        const wrapper = document.createElement("div");
        wrapper.setAttribute("class", "wrapper");

        // Create the header
        const header = document.createElement("h2");
        header.setAttribute("class", "header");
        header.textContent = this.getAttribute("name");

        // Create the image
        const img = document.createElement("img");
        img.setAttribute("class", "img");
        img.src = this.hasAttribute("img")
            ? this.getAttribute("img")
            : "";

        // Create the styles
        const style = document.createElement("style");
        style.textContent = `
            .wrapper {
                border: solid 1px #eee;
                box-shadow: 0 0 7px 1px #eee;
                border-radius: 5px;
                padding: 21px;
            .img {
                border-radius: 5px;
                margin: 0 auto;

        // Add to shadow DOM
        console.log("here's the element", wrapper.outerHTML);

// Element names require a dash.
customElements.define("cat-card", Cat);

I haven’t looked into it very closely yet, but the full documentation is here:

1 Like

Cat Stevens.

Sidenote: is there a cooler programming term than “shadow DOM?”


I found a page on web component libraries, including hybrids, Stencil.js, and lit-element/lit-html.

It looks like they can also be used with older frameworks Vue and React, as well as Angular too (like you mentioned).

Sounds a whole lot like Polymer Elements, to be honest. Hopefully this doesn’t come with the bloat that Google brought to the table.

Hell no! Shadow DOM is the bomb! :slight_smile:

This article series on codepen is also good: