Web Components - Getting Started - Notes

I learn best by taking notes. This is my collection for getting started with Web Components. All the code samples are in vanilla JS with the JavaScript going into a `script`` tag at the head of the document and the HTML placed in the body.

(NOTE: This page is a working-in-progress. There's a lot more to add)

Hello World


Line Notes

// a call to super() is made automatically during
// initialization so it has to be defined

// connect a shadow dom which is where things
// are set up

this.attachShadow({ mode: 'open' })
// create a div and add some content to it. The
// MDN examples show `const content`` instead of
// `this.content`` but I ended up with the
// `this.`` syntax so I could manipulate things
// through other functions in the class

this.content = document.createElement('div')
this.content.innerHTML = 'This is an Alfa element'
// append the newly created div to the shadow
// dom

// This line adds the component into
// the page's CustomElementRegistry which
// makes it available on the page. The first
// argument is the name to use for the tag.
// The second is the class to use for it.
// (i.e. this sets `<wc-alfa></wc-alfa>``
// to come from the `Alfa`` class

customElements.define('wc-alfa', Alfa)
  • Custom elements are defined with a JavaScript `class``

  • Custom elements can extend the generic `HTMLElement`` or specific elements (e.g. `HTMLParagraphElement``)

  • Custom elements can't be single words or camelCase. They have to have a dash in the (e.g. `wcalfa`` doesn't work, but `wc-alfa`` does)

  • More than one dash is fine (e.g. `wc-alfa-ping``)

Reading In Attributes

Using Internal Style Sheets


Adding External Style Sheets

div {
    background-color: red;
  • Loading stylesheets in the shadow DOM doesn't block painting. That means a Flash of Unstyled Content (FOUC) might happen

Customized Built-In Elements vs Autonomous Custom Elements

The elements so fare have been made with `extends HTMLElement`` which makes them Autonomous Custom Elements.

It's also possible to extend existing elements which make them Customized Built-In Elements.

  • Class creation looks like:

    class Echo extends HTMLUListElement { /* */ }

  • adding to the registry looks like

    customElements.define('wc-echo', Echo, { extends: 'ul' })

  • using the element is done with the regular tag and and `is`` attribute. That is, instead of `wc-echo``, it's:

    <ul is="wc-echo">

The connectedCallback Lifecycle Callback

This is invoked each time an element is added or moved. Note that it may fire before the element's contents have been fully parsed (though, I'm not sure what that means yet)


Reading Attributes

Attributes are read after an element has been attached. The process to read attributes that aren't expected to change is to use connectedCallback() like this:


Watching For Attributes Changes

Watching for changes made to attributes from other elements is done with `attributeChangedCallback()``



Templates allow you to define template elements on a page that don't show up until you call them and then place them explicitly with JS. This is the basic set up. This doesn't do much yet


Templates With Slots


This is some text

--h2 Template With Controls

This is from the slot

Second element

Experiment With Template Inside Component

This is a test to see if the template can be embedded in the JavaScript for the component so that you don't need to add it in the HTML


This is from the slot

Second element

Defining the class in the call statement

based off the example on this page:



First Example

Second Example

  • It looks like attributes might have be forced to lowercase. I'm not sure about that. Just keeping everything for lowercase now until I learn more

  • The `{ mode: 'open' }` means that external javascript can interact with the elements in the shadow dom (i.e. with a .shadowRoot). that's not a security level guarantee because there are ways around it, but for normal use that's how it works

  • The MDN pages says that working in a shadow DOM can protect against extensions. Need to do more research there