Web ComponentsのCustom Elements v1を作ってみる

やるやる詐欺してたので、ようやく触りました。参考：https://developers.google.com/web/fundamentals/web-components/customelements ファイル構成 […]

やるやる詐欺してたので、ようやく触りました。

参考：https://developers.google.com/web/fundamentals/web-components/customelements

ファイル構成

$ tree -L 1 .
 ├── app.js
 └── index.html 
 0 directories, 2 files

index.html

スクリプトファイルなどを読み込みます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Hello Web Component</title>
</head>
<body>
  <div id="root">
    <example-element>example-element</example-element>
  </div>
  <script src="app.js" type="module" ></script>
</body>
</html>

ダイレクトに要素を追加する

document.createElement()を使うことで、ダイレクトに要素を追加できます。

function HelloWorld() {
  const header = document.createElement('header');
  const h1 = document.createElement('h1');
  h1.textContent = 'Hello world!';
  header.appendChild(h1);
  document.body.appendChild(header);
}
HelloWorld();

これでbodyタグに <header><h1>Hello world!</h1></header> が挿入されます。

HTMLタグを拡張する

カスタムエレメントでは、HTMLタグの拡張ができます。

HTMLElementをextendsして定義しましょう。

class ExampleElement extends HTMLElement {
  constructor() {
    super();

    this.addEventListener('click', e => {
      alert('clicked')
    });
  }
}
window.customElements.define('example-element', ExampleElement);

最後のcustomElements.define()でタグ名とそのタグ名で使用するクラスを指定します。

上記のサンプルを app.jsに記載して、 <example-element>example-element</example-element>のように記載すればOKです。

出力した状態

example-elementタグが表示されていますね。

先ほどのサンプルではクリックイベントをタグに追加して、クリック時にアラートを出すようにしていました。

こちらもちゃんと動作しています。

おわりに

本当にちょっと触っただけレベルなので、この記事を読むだけでは「で？」となるかもです。

が、HTMLタグを自由に拡張できるのはかなり魅力的なことですし、よく使うUIパーツなどはもうカスタムエレメント化してストックしておくとかでもよいかもしれません。

独自のタグを入れるためだけに、vueやReact入れてpackage.jsonとかwebpack.config.js書くのもツラみを感じる時があるので、程よく組み合わせたりしつつ試してみたいなと思います。