1. このページの目的
<template> タグ内で <script> タグを使ってみる。
2. デモ
コード
HTML
<demo-tag id="demoTag"></demo-tag>
<template id="demo-tag-template">
<style>
h2 {
color: blue;
}
p {
color: green;
}
button {
cursor: pointer;
}
</style>
<script>
document.querySelector('demo-tag#demoTag')
.shadowRoot.querySelector('#btn1')
.addEventListener('click', function() {
alert('clicked!');
console.log('clicked!');
}
);
</script>
<h2>タイトル in カスタムタグ</h2>
<p>こんにちは！</p>
<button id="btn1">Click me!</button>
</template>
JavaScript
customElements.define('demo-tag',
class extends HTMLElement {
constructor() {
super();
const template = document
.getElementById('demo-tag-template')
.content;
const shadowRoot = this.attachShadow({mode: 'open'})
.appendChild(template.cloneNode(true));
}
})
実行結果
3. 結論
<template>タグ内で<script>タグを使うことができる。- しかし、同じ
<template>タグ内の要素を簡単に取得するための仕組みがない（thisはdocumentを指す）。 <template>タグ内の JavaScriptコードで、そのテンプレートが適用されるカスタムタグに指定されている ID を指定するわけにもいかない（1つのテンプレートに対して、適用されるカスタムタグが複数ある場合もあるため）。- 従って、コンポーネントを作成する場合に JavaScriptコードをテンプレート内に配置することはできず、コードを1箇所にまとめることができない。
タイトル in カスタムタグ
こんにちは！