ウェブページ上でクイズを出す その1

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';