從本篇開始，會介紹一些web component的應用，但因為小弟我除了一些小小的side project之外，只有在工作上少量的用了一點web component（比方說做一個客製化的多選下拉選單），文章可能會加入許多參考用的連結而不直接說明(因為我也不是能熟悉那些應用)

VanillaJS

身為js框架中最靈活最萬能的框架，VanillaJS不會對web component的使用做出任何限制。做！就對了。

VanillaJS官網： http://vanilla-js.com/

jquery

相比VanillaJS，jquery雖然在使用上有點限制，但也只有在web component的內部使用jquery時有問題，單單使用web component不會有任何限制。

jquery使用web component

jquery最初開發的目的就是為了弭平不同瀏覧器之間的JS如何獲取或控制DOM中的個別節點，而web component因為有使用到custom element技術，對jquey來說web component就是一個名字比較特別的HTML 元素。

<my-com id="my-com"></my-com>

class MyComponent extends HTMLElement {
    ...
}
customElements.define('my-com', MyComponent);

$.when( $.ready ).then(function() {
    // 基本上，jquery如何使用普通的HTML節點，jquery也可以使用同一種方法來使用web component
  $('my-com#my-com').on('click', () => console.log('click4'))
});

web component使用jquery

在web component中使用jquery有個小問題，因為jquery的selector都是從全域DOM開始尋找，而Shadow DOM的節點本來就不會在全域DOM中出現。除非在shadow DOM內部也link一次jquery，不然大部分的jquery功能都不能使用。（因為第一步通常都是使用$(selector)來限定節點）