Web Components
我們不斷的復用 JavaScript ， CSS 文件，當然還有 HTML 片段，且我們在寫react的時候常常會使用到重複到components，為了確保可重複使用，但同時又希望他們不會因為一些錯誤而破壞我們的心血，Web Components提供了強大的封裝，通過一種標準化的非侵入的方式封裝一個組件，與其他文件不互相干擾。

使用web component的優點

1. 效率高
2. 相比於第三方組件，更簡單直接且符合直覺
3. 不用插入任何外部模塊，代碼量小
4. 高內聚，低耦合

使用web component

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
  }
}

注意:web component使用class而不是className

function BrickFlipbox() {
  return (
    <brick-flipbox class="demo">
      <div>front</div>
      <div>back</div>
    </brick-flipbox>
  );
}

Shadow DOM:
是一組JavaScript API，開發程式者可以透過Shadow DOM自己創建一個完全獨立於其他元素的子 DOM 樹，由於完全獨立於其他樹，所以我們的任何操作都不會影響到其他DOM組件，使得我們可以封裝許多獨立的組件，這樣可以保持元素功能的私有性，這樣就算他們被格式化也不用擔心會與其他部份發生衝突。

使用Shadow DOM

可以使用 Element.attachShadow() 方法來將一個shadowroot 附加到任何一個元素上。

let shadow = elementRef.attachShadow({mode: 'open'});
let shadow = elementRef.attachShadow({mode: 'closed'});

Element.attachShadow()有兩個屬性，一個是mode，另外一個值可以是open或是closed，
open表示可以通過JavaScript 方法來獲取Shadow DOM，但若是使用closed，就不能從外部獲取Shadow DOM
也就是myCustomElem.shadowRoot將會返回null
let myShadowDom = myCustomElem.shadowRoot;

Shadow DOM 附加到custom element 上

我們可以在custom element中添加程式碼
let shadow = this.attachShadow({mode: 'open'});
接著將shadow dom 添加到element中之後，使用DOM APIs 對它進行操作

var para = document.createElement('p');
shadow.appendChild(para);
etc.

結尾:真正交給瀏覽器去處理的是shadow dom，如果缺少shadow dom的實現代碼隔離多少會有缺陷。

參考連結:
https://zh-hant.reactjs.org/docs/web-components.html
https://the-allstars.com/blog/website-information/what-is-web-components-why-is-it-so-important.html
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM