Web Components

構成要素

Custom Elements

カスタム要素を定義する機能。

Shadow DOM

DOMのカプセル化を実現する。

HTML Template

<template>要素を再利用可能なコード(HTML)を定義する。

ES Modules

略

HTML Modules

HTMLをJavaScriptの中にimportできるようにする。

ライフサイクル

constructor

コンポーネントの作成時に呼ばれる。

この時点ではDOMツリーにアタッチされていない。

Shadow DOMやイベントリスナーの設定、状態の初期化等を行う。

connectedCallback

コンポーネントがDOMツリーに挿入された際に呼ばれる。

disconnectedCallback

コンポーネントがDOMツリーから削除された際に呼ばれる。

イベントリスナーの破棄等を行う際に便利。

attributeChangedCallback

監視対象の属性が変更された際に呼ばれる。

adoptedCallback

Shadow DOM

HTMLElement#attachShadow

code:javascript

class HogeElement extends HTMLElement {

constructor() {

const template = document.createElement('template');

template.innerHTML = `

<style>

:host { background-color: blue; }

</style>

<div>hello</div>

`;

this._shadow = this.attachShadow({mode: 'open'});

this._shadow.appendChild(template.content.cloneNode(true));

}

}

customElements.define('hoge-element', HogeElement);

ライブラリ

A Blazing Fast, Enterprise-Grade Web Components Foundation

Salesforceが開発している。

A simple base class for creating fast, lightweight web components

Effortless custom elements powered by modern view libraries.

Web Components with a strong declarative and functional approach based on plain objects and pure functions

Fast & Robust Front-End Micro-framework based on modern standards

A reactive Web Component library to create Custom Element and turns any HTML sections into components

A Web Component compiler for building fast, reusable UI components and Progressive Web Apps Built by the Ionic Framework team

参考