22:14:44 例: “time-formatted” | Custom elementsのsample codeを動かしてみる

22:28:11 parcelで構築されている

何故かNull条件演算子を使うとcompile errorが出る

22:30:30 に切り替えた

Custom Elementsを試すだけだし、まあ型なしでもなんとかなるだろう

最終的にはScrapboxUserScriptで使いたいのだし

22:37:10 例: “time-formatted” | Custom elementsは動いた

CodeSandbox特有の現象

hot reloadを使うと、CustomElementRegistry.define()が二回走ってしまい、結果二重定義エラーが出てしまう

手動で F5 を押せば直る

CustomElementRegistry.get()を使って既に定義済みかどうかを確認すればエラーを回避できるか。

22:44:52Custom Elementsの定義を別ファイルにしてみた

勿論ちゃんと動く

22:48:31 からCustom Elementsの動的追加を試してみた

問題なく追加できている

これなら、scrapbox-card-bubble-2で動的にcardを追加することもできそうだな

22:50:33 Custom elementsを試す

HTMLElement.observedAttributes static propertyで、変更を監視したい属性名のリストを返す

監視対象の属性が変更されると、HTMLElement.attributeChangedCallback()が呼び出される

この中で再renderすればいい

23:04:19 Custome Elementのlife cycleを書く

23:18:59 書いた

References

#2020-12-09 22:14:50