home ~ projects ~ socials

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

super()
// 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.shadowRoot.append(this.content)
// 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

TODO

    ☐

    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

Adding External Style Sheets

/styles/example-alfa.css

div {
    background-color: red;
}

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

TODO

    ☐

    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)

TODO

    ☐

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

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

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

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:

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

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

-- end of line --

References