# Web Components

**URL:** <https://forum.codeselfstudy.com/t/web-components/2249>\
**Category:** General Discussion\
**Tags:** javascript\
**Created:** [April 21, 2020, 10:11pm UTC](https://forum.codeselfstudy.com/t/web-components/2249 "2020-04-21T22:11:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [April 21, 2020, 10:11pm UTC](https://forum.codeselfstudy.com/t/web-components/2249/1 "2020-04-21T22:11:34Z")

</div>

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

https://codepen.io/j127/embed/preview/MWabrGO?height=300&slug-hash=MWabrGO&default-tabs=js,result&host=https://codepen.io

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

```auto
<cat-card
    name="Alice"
    img="https://placekitten.com/250/249"
></cat-card>

```

With JavaScript like this:

```javascript
class Cat extends HTMLElement {
    constructor() {
        super();

        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")
            : "https://placekitten.com/250/250";

        // 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
        shadow.appendChild(style);
        shadow.appendChild(wrapper);
        wrapper.appendChild(header);
        wrapper.appendChild(img);
        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:

[https://developer.mozilla.org/en-US/docs/Web/Web\_Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)

---

<div class="post-metadata">

**Author:** ![trevorfehrman](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/trevorfehrman/32/1468_2.png) [@trevorfehrman](https://forum.codeselfstudy.com/u/trevorfehrman)\
**Post date:** [April 22, 2020, 4:10pm UTC](https://forum.codeselfstudy.com/t/web-components/2249/2 "2020-04-22T16:10:56Z")

</div>

Cat Stevens.

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

---

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [April 22, 2020, 7:31pm UTC](https://forum.codeselfstudy.com/t/web-components/2249/3 "2020-04-22T19:31:02Z")

</div>

I found a page on [web component libraries](https://www.webcomponents.org/libraries), including [hybrids](https://github.com/hybridsjs/hybrids), [Stencil.js](https://stenciljs.com/), and [lit-element](https://github.com/Polymer/lit-element)/[lit-html](https://lit-html.polymer-project.org/).

It looks like they can also be used with older frameworks [Vue](https://cli.vuejs.org/guide/build-targets.html#web-component) and [React](https://reactjs.org/docs/web-components.html), as well as [Angular](https://angular.io/guide/elements) too (like you mentioned).

---

<div class="post-metadata">

**Author:** ![OutsourcedGuru](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/outsourcedguru/32/983_2.png) [@OutsourcedGuru](https://forum.codeselfstudy.com/u/OutsourcedGuru)\
**Post date:** [April 22, 2020, 9:58pm UTC](https://forum.codeselfstudy.com/t/web-components/2249/4 "2020-04-22T21:58:39Z")

</div>

Sounds a whole lot like [Polymer Elements](https://www.webcomponents.org/collection/Polymer/elements), to be honest. Hopefully this doesn’t come with the bloat that Google brought to the table.

---

<div class="post-metadata">

**Author:** ![PaulH](https://forum.codeselfstudy.com/letter_avatar_proxy/v4/letter/p/e495f1/32.png) [@PaulH](https://forum.codeselfstudy.com/u/PaulH)\
**Post date:** [April 24, 2020, 4:07am UTC](https://forum.codeselfstudy.com/t/web-components/2249/5 "2020-04-24T04:07:58Z")

</div>

> [@trevorfehrman](#):
>
> Sidenote: is there a cooler programming term than “shadow DOM?”

Hell no! Shadow DOM is the bomb! 🙂

---

<div class="post-metadata">

**Author:** ![PaulH](https://forum.codeselfstudy.com/letter_avatar_proxy/v4/letter/p/e495f1/32.png) [@PaulH](https://forum.codeselfstudy.com/u/PaulH)\
**Post date:** [May 10, 2020, 4:23am UTC](https://forum.codeselfstudy.com/t/web-components/2249/6 "2020-05-10T04:23:38Z")

</div>

This article series on codepen is also good: [https://css-tricks.com/an-introduction-to-web-components/](https://css-tricks.com/an-introduction-to-web-components/)