An Introduction to Web Components

What?

Why?

Usage

Web Component Definition

<srcipt>
class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer)
</srcipt>
<app-drawer></app-drawer>

Shadow DOM Usage

const header = document.createElement('header')

const shadowRoot = header.attachShadow({mode: 'open'})
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'

// NOTE: header.shadowRoot === shadowRoot
// NOTE: shadowRoot.host === header

Libraries for Simplifing Web Component Definition

References

More


* cached version, generated at 2020-05-22 13:55:07 UTC.

Subscribe by RSS