Web Components Quick View

All you need to know to get started immediately

What is a Web Component?

A Web Component starts with a `CustomElement`. Whatever you want to add upon is up to your use-case.

What is a Web Component in "plain simple"?

//Pseudocode! 🐒
define('my-component', '<strong>Hello Foobar</strong>')

<my-component></my-component>

<my-component>
  <strong>Hello Foobar</strong>
</my-component>

Now for real?

//Real code! ✅
customElements.define('my-component', 
  class extends HTMLElement {}
)

A valid but useless example!

You can obviously and theoretically use anything that extends `HTMLElement`

Gimme more!

//Real code! ✅
customElements.define('my-component', 
  class extends HTMLElement {
    connectedCallback() {
      this.innerHTML = 'Hello I am my-component';
      
      setTimeout(() => {
        this.innerHTML = 'Timeout passed';
      }, 2500);
    }
  }
)

More!

Well let us LiveCode a bit and check:

- Attribute observation

- Shadow DOM

- Slots

What else?

- You can use linkp[rel] stylesheet loading

- Do not self-close

- Use Shadow DOM with Caution considering your use cases

- Shadow DOM does not scope away Component definition so customElements are inherited

Can I re-read?

https://dev.to/activenode/web-components-shadow-dom-shadow-css-tldr-4cgh