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

HTML

<wc-alfa></wc-alfa>

Line Notes

Code

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

super()

Code

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

this.attachShadow({ mode: 'open' })

Code

// 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'

Code

// append the newly created div to the shadow
// dom

this.shadowRoot.append(this.content)

Code

// 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)

Notes

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

Get an example here, the first one on the MDN page doesn't define a class which seems like it defeats the purpose.

Using Internal Style Sheets

Output

Adding External Style Sheets

/styles/example-alfa.css

div {
    background-color: red;
}

Output

Notes

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.

Notes

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">

Figure out how style sheets work with this. And if there's any difference between this and autonomous components

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)

Figure out what happens if a connectedCallback is fired before the contents are fully parsed and what makes that happen in the first place

Output

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:

Output

Watching For Attributes Changes

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

Output

Update Lima:

Templates

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

Output

Templates With Slots

Output

This is some text

--h2 Template With Controls

Output

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

Output

This is from the slot

Second element

Defining the class in the call statement

based off the example on this page:

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots

Output

First Example

Second Example

Notes

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

TODO

make example extending a specific element

Reference

Web Component Example: Just Some HTML