Web Components で喋るボタンをつくってみる

スピーチボタン

<speech-button value="Hello World!"></speech-button>
<speech-button value="こんにちは">
<span slot="label-text">スピーチボタン</span>
</speech-button>
<script>
class SpeechButton extends HTMLElement {
constructor() {
super();
this.value = null;
const html = `
<style>button{
cursor: pointer; background: #3498db; padding: 10px 20px; font-size: 18px; color: #fff; border: 0; border-radius: 100px;
}</style>
<button><slot name="label-text">speech button</slot></button>`;
//Shadow DOM を作成し open で自身にアクセスできるように設定
this.attachShadow({'mode': 'open'});
this.shadowRoot.innerHTML = html;
let value = this.getAttribute('value');
this.button = this.shadowRoot.querySelector('button');
this.button.setAttribute('value', value);
}
//ドキュメント接続要素にカスタム要素が追加された
connectedCallback() {
this.button.addEventListener('click', this.onClick);
}
//ドキュメント接続要素にカスタム要素が削除された
disconnectedCallback(){
this.button.removeEventListener('click', this.onClick);
}
onClick(e) {
const hello = new SpeechSynthesisUtterance(this.value);
speechSynthesis.speak(hello)
}
}
//新しいカスタムエレメントを定義
//customElements.define(name, constructor, options);
customElements.define('speech-button', SpeechButton);
</script>

参考文献