All you need to know to get started immediately
A Web Component starts with a `CustomElement`. Whatever you want to add upon is up to your use-case.
//Pseudocode! 🐒 define('my-component', '<strong>Hello Foobar</strong>')
<my-component></my-component>
<my-component> <strong>Hello Foobar</strong> </my-component>
//Real code! ✅ customElements.define('my-component', class extends HTMLElement {} )
A valid but useless example!
You can obviously and theoretically use anything that extends `HTMLElement`
//Real code! ✅ customElements.define('my-component', class extends HTMLElement { connectedCallback() { this.innerHTML = 'Hello I am my-component'; setTimeout(() => { this.innerHTML = 'Timeout passed'; }, 2500); } } )
Well let us LiveCode a bit and check:
- Attribute observation
- Shadow DOM
- Slots
- 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
https://dev.to/activenode/web-components-shadow-dom-shadow-css-tldr-4cgh
By activenode
