Web Components触ってみた
Web Componentsとは
再利用可能な部品を作成するための技術。今回はその要素であるCustom ElementsとShadow DOMを触ってみます。
Custom Elements
独自の要素を作成できる。
class ElementA extends HTMLElement {
constructor() {
super();
this.innerHTML = `
<style>
div { color: red }
</style>
<div>Hello</div>`
}
}
customElements.define('element-a', ElementA);
HTMLElementを継承したclassを定義し、customElements.define
で要素を定義することでHTMLで<element-a></element-a>
のように呼ぶことができます。
Shadow DOM
要素をカプセル化できます。カプセル化することによって他のstyleの影響をうけなくなります。
class ElementB extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
<style>
div { color: blue }
</style>
<div>Hello</div>`
}
}
customElements.define('element-b', ElementB);
this.attachShadow
を呼び出すことでShadow DOMを作成できます。
定義した要素を使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Web Components</title>
<script type="module" src="./ElementA.js"></script>
<script type="module" src="./ElementB.js"></script>
</head>
<body>
<element-a></element-a>
<element-b></element-b>
</body>
</html>
このようにして定義した要素を呼び出します。
所感
Reactなどのライブラリを使用せずに、素のJavaScriptで再利用可能な部品を作成できるところがいいですね。
Author And Source
この問題について(Web Components触ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/hrtwtnb/items/b66c6c9645814b6a3ad5著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .