Web Components --- 提取为单独文件我们通过自定义标签封装一些特定的DOM结构，在需要的地方使用，但在开

我们通过自定义标签封装一些特定的DOM结构，在需要的地方使用，但在开发过程中我们希望HTML,javascript,Css可以在一个文件中，方便我们维护代码，这时需要将其单独提取出来，放在一个js文件中，这样方便的阅读以及维护，在需要使用的地方引入即可。

单独提取出来的js文件中，html代码结构要么是js方法生成，要么是字符串拼接（这个没办法），但是在编辑器中有相应的插件（例如：vscode中的es6-string-html插件，只需在字符串前加上/html/即可）可以帮我们识别这部分字符串，高亮显示，这样方便我们阅读并编辑，但是没有办法格式化

myElement.js

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(`.wrapper{width:300px;display:flex;padding-bottom:5px;margin-bottom:10px; border-bottom:1px solid red;}`);
    const shadowRoot = this.attachShadow({ mode: "open" });
    shadowRoot.adoptedStyleSheets = [sheet];
    shadowRoot.innerHTML =/*html*/`
        <div class="wrapper">
            <div class="left">
                <slot name="left">审理</slot>
            </div>
            <div class="right">
                <slot></slot>
            </div>
        </div>
    `;
  }
  disconnectedCallback() {}
  adoptedCallback() {}
  attributeChangedCallback() {}
}

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

index.html

 <script src="./myElement.js"></script>
 
 <body>
    <style>
        img{
          width:80px;
        }
      </style>
    <my-element>
      <img src="./pander.png" slot="left" alt="" />
      <div class="title">熊猫</div>
      <div class="desc">
        熊猫可可爱爱，熊猫可可爱爱，熊猫可可爱爱， 熊猫可可爱爱，熊猫可可爱爱，熊猫可可爱爱，熊猫可可爱爱
      </div>
    </my-element>
    <my-element>
        <div class="title">左边是标题</div>
        <div class="desc">
            右边是内容右边是内容右边是内容右边是内容右边是内容右边是内容右边是内容右边是内容
        </div>
    </my-element>
  </body>

运行结果