🔰web component

isolated pieces (kinds of blocks) with which a user interface (UI) can communicate with other elements, through properties and events.

browser ⟩ web component

web components are implemented as a custom element that uses a <template> tag for efficiency and a shadow root for encapsulation.

⭐️ 重點

• define their own HTML tag names, with the important restriction that those tag names must include a hyphen.

• cannot be defined with self-closing tags.

some web components are written to:

• expect children.

• not expect children (and won't display them)

• optionally accept specially labelled children that will appear in named "slots".

popular frameworks：Angular, React, Vue.js

🔴 主題

• using components

  • hide components until defined

• implementing components

  • custom element

  • shadow DOM

    • shadow DOM events

    • shadow DOM styles

    • shadow DOM slots

  • <template>

• web component examples

  • <search-box>

🛠 工具

• Lit (Google)

📗 參考

• 📗 JS.info ⟩ Web component

• 📗 Building Native Web Components (2021)

• 📗 JavaScript: The Definitive Guide (15.6 Web Components)

• 📘 Google ⟩ Web Components ⟩

  • Custom Elements

  • Shadow DOM

  • Tips & Tricks

  • Best Practices

📘 手冊

• MDN ⟩ Web Components ⟩

  • Using shadow DOM ⭐️

  • Using custom elements ⭐️

  • Using templates and slots

  • Using External Styles

• Google ⟩ Web components

  • 📘 Shadow DOM v1: Self-Contained Web Components

💈 範例

• A Typewriter, but using a New HTML Tag

• Calculator

👥 相關

• client-side JavaScript timeline - web components are not defined until fully loaded.

cheatsheet

create

📁 html

<!-- ⭐️ 1. custom element -->
<my-component></my-component>

<!-- ⭐️ 2. customized built-in element -->
<!-- ⭐️   `is="my-componet"` attribute -->
<button is="fancy-button">some text</button>

📁 js

// ⭐️ 2. `new MyComponent()`
let button = new FancyButton();

// ⭐️ 3. `document.createElement('my-component')` 
//                                            ╭────────⭐️────────╮
let button = document.createElement('button', {is: 'fancy-button'});

button.textContent = 'Fancy button!';
button.disabled = true;
document.body.appendChild(button);

define

// --------------- ⭐️ customized built-in element ---------------
class FancyButton extends HTMLButtonElement { 
    constructor(){...} 
}

// register new tag
//                                                 ╭───────⭐️────────╮
customElements.define('fancy-button', FancyButton, {extends: 'button'});


// --------------- ⭐️ autonomous custom element ---------------
class MyComponent extends HTMLElement {

    // constructor
    constructor() {

        // tell HTMLElement to initialize itself.
        super();

        // get `width`, `height` attributes
        const height = this.getAttribute('height') || '100px';
        const width = this.getAttribute('width') || '100px';
        // ...
    }
    
    // connected to document
    connectedCallback() {

        // attach shadow root
        let root = this.attachShadow({mode: 'open'});

        // ⭐️ clone nodes from <template>
        let clone = tmpl.content.cloneNode(true);
        root.append( clone );

        // ...
    }

    // template HTML
    static template(height, width) { 
        return ` 
            <style> 
                .placeholder { 
                    background-color: pink; 
                    width: ${height}; 
                    height: ${width}; 
                }
            </style>

            <div class='placeholder'>Placeholder</div>
        `;
    }
} 

// ⭐️  register <my-component>
// ⭐️⭐️ custom element names must contain a "hyphen".
customElements.define('my-component', MyComponent);

💈範例

• Calculator ❤️