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書くのもツラみを感じる時があるので、程よく組み合わせたりしつつ試してみたいなと思います。
ブックマークや限定記事（予定）など
WP Kyotoサポーター募集中
WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。
14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。