1. このページの目的
ウェブページ上でクイズを出すための Web Component を作成する。
2. デモ
3. 疑問点
その1
カスタム要素クラス定義内の constructor()
もしくは connectedCallback()
内で、例えば以下のように要素を取得しておき、
this.foo = this.shadowRoot.querySelector('#foo');
解答が終わった段階で、以下のように操作しても画面上に反映されなかった。
this.foo.style.display = 'none';
この操作を行う直前で要素を取得すれば、反映される。なぜ?
const foo = this.shadowRoot.querySelector('#foo');
foo.style.display = 'none';