简括：

Web Components 基于四个主要的规范： Custom Elements，Shadow DOM，HTML Templates 和 HTML Imports。

Custom Elements 可以让开发人员创建自定义的 HTML 标签。

 Shadow DOM 可以让开发人员将样式和行为封装到自定义元素内部，并且不影响其周围的 Web 页面。

HTML Templates 可以存储 HTML 片段，以便在需要时引用。

HTML Imports 则允许开发人员以模块化的方式组织和导入 Custom Elements 和 HTML Templates。

Custom Elements 和  Shadow DOM 是 最重要的两个API（规范），也是micro-app 和 wujie 的底层实现逻辑。 

micro-app 主要依靠 （web Component 和 proxy 实现）

下面有一个代码，体现了这两个重要的API如何使用： 

1、const shadowRoot = this.attachShadow({ mode: 'open' });       attachShadow：创建了一个shadowDOM ，它通过使用 Shadow DOM，将组件的样式和行为封装在一个“封闭”的子树中。

2、customElements.define('my-element', MyElement);                  customElements.define() 方法，将 MyElement 类注册为自定义元素

// 以下是一个示例代码：<template id="my-element-template"><style>:host {background-color: lightblue;display: block;padding: 20px;border-radius: 5px;}</style><div><h1>Hello, World!</h1><p>This is my custom element.</p></div>
</template><script>class MyElement extends HTMLElement {constructor() {super();const template = document.getElementById('my-element-template');const templateContent = template.content.cloneNode(true);const shadowRoot = this.attachShadow({ mode: 'open' });shadowRoot.appendChild(templateContent);}}customElements.define('my-element', MyElement);
</script>
```在这个示例中，我们定义了一个 MyElement 类，这个类是一个自定义元素，它通过使用 Shadow DOM，将组件的样式和行为封装在一个“封闭”的子树中。在构造函数中，我们通过使用 template 和 cloneNode 方法，将 Shadow DOM 填充为组件的内容。最后，我们通过调用 customElements.define() 方法，将 MyElement 类注册为自定义元素，从而可以在页面中使用它。

shadow DOM 树展示图： 

MDN例子：