Web component学习记录attachShadow({ mode: 'open' }) customElemen

下面做一些点的理解和补充：

attachShadow({ mode: 'open' })
1. 可以在构造函数中this.attachShadow({ mode: 'open' })，也可以在外部js通过普通DOM挂载container.attachShadow({ mode: 'open' });构造函数挂载这个this就是显露在DOM上的dom，#shadow,这里的custom-square是普通DOM，里面的东西才是shadow
2. 返回的是#shadow-root节点。mode为open时，所处挂载节点可通过dom.shadowRoot的属性拿到#shadow-root节点。mode为' closed'时，dom.shadowRoot的值为null。
3. 同一dom，只能attachShadow，只能attach一个shadow，重复执行报错。
需要注册自定义标签组件
1. 继承HTMLElement。 customElements.define('user-info', UserInfo); 使用<user-info></user-info>
2. 继承HTMLInputElement。customElements.define('my-h1', MyH1, { extends: "input" }); 使用 <input type="text" is="my-h1" />
生命周期,回调钩子。在class定义中使用。
1. onnectedCallback：当自定义元素首次被插入文档 DOM 时，被调用。
  
  disconnectedCallback：当自定义元素从文档 DOM 中删除时，被调用。
  
  adoptedCallback：当自定义元素被移动到新的文档时，被调用。
  
  attributeChangedCallback: 当自定义元素增加、删除、修改自身属性时，被调用（即使元素未挂载）。

template和slot

<body>
    <template id="tpl-test">
        <style>
            .title {
                color: green;
            }
        </style>
        <div class="title">标题</div>
        <slot name="slot-des">默认内容</slot>
    </template>
    <test-item>
        <div slot="slot-des">不是默认内容</div>
    </test-item>
    <script>
        class TestItem extends HTMLElement {
            constructor() {
                super();
            }
            connectedCallback() {
                const content = document.getElementById("tpl-test").content.cloneNode(true);
                const shadow = this.attachShadow({ mode: "open" });
                shadow.append(content);
            }
        }
        window.customElements.define("test-item", TestItem); </script>
</body>