微前端前置知识—-webComponents

本文介绍: Sha do wRo o t 是 We b Co mp on e n ts 中的一个重要概念，它允许开发者创建封装的 DOM 树，用于隔离组件内部的样式和脚本，以防止与外部环境发生冲突。Sh a do wRo o t 是通过使用 Sh a do w DOM 技术实现的。Sha do w DOM 是一种将 DOM 树封装在一个 Shado wRo o t 内部的机制，使得 Shado wRo o t 内部的 DOM 结构和样式不会被外部环境所影响。

webComponents

概念和使用

生命周期

总结

Shado wRoot 是 Web Com ponents 中的一个重要概念，它允许开发者创建封装的 DOM 树，用于隔离组件内部的样式和脚本，以防止与外部环境发生冲突。

ShadowRoot 是通过使用 Shadow DOM 技术实现的。Shadow DOM 是一种将 DOM 树封装在一个 ShadowRoot 内部的机制，使得 ShadowRoot 内部的 DOM 结构和样式不会被外部环境所影响。

ShadowRoot 具有以下特点：

封装性：ShadowRoot 内部的 DOM 结构和样式是私有的，不会影响到外部环境。这意味着你可以在 ShadowRoot 内部定义自己的样式规则，而不用担心与外部环境的样式冲突。

作用域：ShadowRoot 内部的样式只会应用于 ShadowRoot 内部的 DOM 元素，不会泄漏到外部环境。这样可以确保组件的样式只对组件内部生效，不会影响到其他组件或页面的样式。

继承性：ShadowRoot 内部的 DOM 结构可以继承外部环境的样式，这意味着你可以在组件内部使用外部环境定义的样式，同时又能保持样式的封装性。

ShadowRoot 可以通过使用 Element 的 attachShadow() 方法来创建，并将其附加到一个元素上。例如：
const element = document.querySelector('#my-element');
const shadowRoot = element.attachShadow({ mode: 'open' });
在上面的例子中，我们将一个 ShadowRoot 附加到 #my-element 元素上，并指定了 mode: 'open'，表示 ShadowRoot 是开放的，可以从外部访问。

一旦创建了 ShadowRoot，你可以在其中添加自己的 DOM 结构和样式，以及处理事件和其他逻辑。这样，你就可以将组件的实现细节封装在 ShadowRoot 内部，与外部环境隔离开来，提高组件的可维护性和可重用性。

customElements.define(name, constructor, options);

class MyElement extends HTMLElement {
  connectedCallback() {
    console.log('MyElement connected');
  }
}

customElements.define('my-element', MyElement);

<my-element&gt;</my-element&gt;

var shadowroot = element.attachShadow(shadowRootInit);

shadowRootInit 一个 ShadowRootInit 字典，包括下列字段：

element.shadowRoot; // 返回一个 ShadowRoot 对象

element.shadowRoot; // 返回 null

一个布尔值，当设置为 true 时，指定减轻自定义元素的聚焦性能问题行为。当 shadow DOM 中不可聚焦的部分被点击时，让第一个可聚焦的部分成为焦点，并且 shadow host（影子主机）将提供所有可用的 :focus 样式。

返回一个 ShadowRoot 对象或者 null。

异常	说明
`InvalidStateError 无效状态错误`	你添加的元素已经是一个 shadow host（影子主机）.
`NotSupportedError 不被支持错误`	你应该添加 HTML 元素的命名空间之外的 shadow root，或者这个元素不能有其他 shadow 挂载到它上面 (见上).

element.attachShadow(options);

其中，options 是一个可选的对象，用于指定 Shadow Root 的模式。常见的模式有两种：

<!DOCTYPE html&gt;
<html>
  <head>
    <style>
      /* 外部文档的样式 */
      button {
        background-color: blue;
        color: white;
      }
    </style>
  </head>
  <body>
    <my-button></my-button>

    <script>
      // 创建自定义按钮组件
      class MyButton extends HTMLElement {
        constructor() {
          super();
          const shadowRoot = this.attachShadow({ mode: 'open' });
          shadowRoot.innerHTML = `
            <style>
              /* 组件内部的样式 */
              button {
                background-color: red;
                color white:;
              }
            </style>
            <button>Click me</button>
          `;
        }
      }

      // 注自册定义按钮组件
      customElements.define('my-button', MyButton);
    </script>
  </body>
</html>

在上面的示例中，我们创建了一个自定义按钮组件 MyButton，并在其构造函数中调用了 attachShadow() 方法来创建 Shadow Root。在 Shadow Root 中，我们定义了按钮的内部结构和样式。最后，我们通过 customElements.define() 方法将自定义按钮组件注册为 <my-button> 标签，然后可以在页面中使用该组件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--外层写一个div测试隔离-->
    <div>我是div</div>

    <wu-jie url="xxxxxx"></wu-jie>


    <template id="wu-jie">
        <!--div的样式是作用于全局的-->
        <style>
            div {
                background: red;
            }
        </style>
        <div>
            （测试样式隔离）
        </div>
    </template>


</body>
<script>
    window.onload = () => {
        class WuJie extends HTMLElement {
            constructor() {
                super()
                this.init()
                this.getAttr()
            }
            init() {
                const shadow = this.attachShadow({ mode: "open" }) //开启影子dom 也就是样式隔离
                const template = document.querySelector('#wu-jie')
                console.log(template);

                shadow.appendChild(template.content.cloneNode(true))
            }
            getAttr() {
                console.log('获取参数', this.getAttribute('url'));

            }

            //生命周期自动触发有东西插入
            connectedCallback() {
                console.log('类似于vue 的mounted');
            }
            //生命周期卸载
            disconnectedCallback() {
                console.log('类似于vue 的destory');
            }
            //跟watch类似
            attributeChangedCallback(name, oldVal, newVal) {
                console.log('跟vue 的watch 类似 有属性发生变化自动触发');
            }

        }

        window.customElements.define('wu-jie', WuJie)
    }


</script>

</html>