測試目的

• 想尋找Web Componet在iframe以外的用途
• Jupyter Plugin / Joplin Plugin 的套件範例都包了很舊的build script，在不修改build script的情況(不想挑戰)，用Web Component編寫擴充功能會不會更好呢？

發現

• Shadow DOM有著Style isolation的特性，不會承繼外面的style，當然也反過來不會影響到shadow dom以外， 本身是好的設計，但許多css framework都不支援，又或要修改build script

• 最後用上 JSS (JavaScript Style Sheet) 解決

• Font的問題則是反過來，並不提供任何isolation機制，你需要自行在root document中載入，又或者不使用shadow dom機制（哪要web component來幹麼？）

• attributes / event

  • 用attribute來傳遞資料，但只限基本類型，Object類要先用JSON.stringify轉成文字，這並不方便
  • 用Event來接收來自web component的事件

• template & slot - 在測試中沒有用到，沒有意見

結論

Font及style的差別做法令人感到很頭痛，畢竟經常要到像是Font Awesome類型的圖示，放棄使用Shadow dom的話還不如不要使用Web Component，使用體驗就像雞肋一樣，食之無味，棄之可惜。