はじめに
私は研究や仕事でWeb Componentsに関する技術を使っているわけではなく、プロではないのですが「とりあえず使ってみたい！」と思って使ってみました。
本記事は「技術的なことは追々わかるとして、とりあえず動くものを作りたい！」という人向けです。
日本語で結構、技術的なことを分かりやすくまとめてくださっている記事は 初心者向けWebComponentsまとめにあります。「初心者向けWebComponentsまとめ」ではライフサイクルなどにも触れていますが、 本記事はHTML5のタグをペタペタ貼って、一つのElementを作ってみよう！というものです。
Qiitaに、この先書き続けるか分からないので、自分のウェブサイトにも同じ内容を書いています。こちらは、これからWebcomponentsについての知識が増えれば、随時更新しまとめていきますので、よければ参照してください。逆に言えば、この記事は誤植や誤りの訂正以外は書きっぱなしになります。
用意するファイル
用意するファイルは以下の2つです。適当なディレクトリに適当なディレクトリ（今回はwebcomponentsにしています）を作成してください。
Custom Elementは全てjavascriptで記述します。その記述されたCustom ElementをHTMLファイルで利用するという流れです。
webcomponents/
|- index.html
|- example-template.js
コードと解説
それぞれのファイルとコードについて解説をします。
HTMLファイルで重要なのは、Custom Elementを引っ張ってくるときに'defer'を入れないと、正しく動かないことです。javascriptを参照するときに、必ず入れましょう。
<!DOCTYPE html><htmllang='en'><head><metahttp-equiv='Content-Type'content='text/html; charset=UTF-8'><script type="text/javascript"src="./example-template.js"defer></script><!-- Custom Elementを引っ張ってくる "defer" を書かないと動かない --><title>custom elements example</title></head><body><!-- Custom Elementの利用。nameTitleとplaceHolderは作成した新しい属性（Attribute） --><example-templatenameTitle="Text form"placeHolder="Please type your name"></example-template><example-templatenameTitle="Text form2"placeHolder="複数elementを使っても、きちんと別々に文字が入る。"></example-template></body></html>classExampleTemplateextendsHTMLElement{constructor(){// superは必ず一番最初に呼び出される。super();// これより下にCustom Elementに関する記述を行う//shadow rootの作成。これが今回の一番上のノード（ルート）constshadow=this.attachShadow({mode:'open'});// 今回はひとまとまりをsectionで包むconstwrapper=document.createElement('section');//* Sectionの下に並べるElementsの情報を入れていく *//// h2タグ（タイトル）constsubtitle=document.createElement('h2');consttitleSub=this.getAttribute('nameTitle');// nameTitleというAttributeの値を取得subtitle.textContent=titleSub;// nameTitleの値をh2タグで表示// form & input (テキストフィールド)constformF=document.createElement('form');consttextField=document.createElement('input');textField.setAttribute('type','text');// inputのtype指定textField.setAttribute('class','textField');// classをtextFieldにconstcontents=this.getAttribute('placeHolder');// placeHolderというAttributeの値を取得textField.setAttribute('placeholder',contents);// input(type=text)のplaceholderにplaceHolderの値を代入formF.appendChild(textField);// formの下にtextFieldをネストする// Shadow domにCSSを適用するconststyle=document.createElement('style');console.log(style.isConnected);style.textContent=`
.textField {
width: 500px;
height: 300px;
}
`;//今回はtextFieldの幅と高さを指定した。// shadow domを一番上にして、上で作ったものをネストしていく// shadow |- style// |- wrapper |- subtitle// |- formFshadow.appendChild(style);shadow.appendChild(wrapper);wrapper.appendChild(subtitle);wrapper.appendChild(formF);}}// 新しいElementの定義customElements.define('example-template',ExampleTemplate);実際に表示される画面
まとめ
- HTMLとjavascriptでCustom Elementを作った
- 同じelementの同じ属性に異なる入力を入れたところ、表示はきちんと異なるそれぞれの入力値が表示された
問合せ
間違えや「ここ、こうした方がいいよ！」という意見や「詳しく聞きたい！」ということがありましたら、以下のメールアドレスまたは本記事にコメントをお願いします。
akira.kashihara@hotmail.com