自定义标签的编码

时间 2019-11-06

原文原文链接

customElements.define

在MDN官方文档中，若是你想要使用自定义标签，可使用customElement类中define方法（IE7如下浏览器不支持），
使用：customElements.define('myselfTagName', myselfClass, extendsObj);
参数：css

myselfTagName: 自定义标签名
myselfClass: 自定义标签的类对象，（主要功能在这里实现，通常在自定义标签绑定变量、事件、指令或者是渲染条件）
extendsObj: 内置并继承的元素（包裹着自定义标签的对象，通常不使用，毕竟谁会闲的无聊把基本标签封装成自定义标签而后填充一堆属性，语义化也说不通啊）

attachShadow

官方文档对于shadow DOM解释很模糊，简单的说就是DOM的'一体双魂'，拥有一样的函数和方法，可是Shadow DOM比被附加DOM更多的功能，前者具备独自的做用域，而且与外界DOM分隔。（这个做用就是shadow DOM的核心功能，它可使你编写的DOM与css与其余区域互不影响，至关于vue中css样式<style scoped> </style>的做用）；
shadow DOM弥补了customElements缺乏隔离做用域（DOM和css做用域）的缺陷。html

shadom DOM Root的建立方法： this.attachShadow({mode: 'open'});前端

this: shadom DOM对象
mode: 开启js调用shadow DOM

代码示范

coding.... 莫道征途路漫漫

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pop-up info box — web components</title>
  </head>
  <body>
    <h1>Pop-up info widget - web components</h1>

    <form>
      <div>
        <label for="cvc">Enter your CVC <popup-info img="img/alt.png" data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></label>
        <input type="text" id="cvc">
      </div>
    </form>
  </body>
  <script>
/**
 *
 * @description：将shadow root附加到customelement上，
                 而后经过一系列DOM操做建立custom element的内部阴影DOM结构，
                 再将其附加到 shadow root上，最后再将一些CSS附加到 
                 shadow root的style节点上。
 */
 
class PopUpInfo extends HTMLElement {
  constructor() {
    // 必须使用super初始化customElements类的构造器
    super();

    // 建立shadom Dom Root，该Root 挂载在自定义DOM上，该DOM Root节点是一个真实节点。
    const shadow = this.attachShadow({mode: 'open'});

    // Create spans
    const wrapper = document.createElement('span');
    wrapper.setAttribute('class', 'wrapper');

    let icon = document.createElement('span')，
        info = document.createElement('span')，
        text = this.getAttribute('data-text');
          
    icon.setAttribute('class', 'icon');
    icon.setAttribute('tabindex', 0);
    info.textContent = text;
    info.setAttribute('class', 'info');

    let imgUrl = this.hasAttribute('img') ? this.getAttribute('img'): 'img/default.png',
        img = document.createElement('img');
        
    img.src = imgUrl;
    icon.appendChild(img);

    // 优化样式
    const style = document.createElement('style');
    console.log(style.isConnected);

    style.textContent = `
      .wrapper {
        position: relative;
      }

      .info {
        font-size: 0.8rem;
        width: 200px;
        display: inline-block;
        border: 1px solid black;
        padding: 10px;
        background: white;
        border-radius: 10px;
        opacity: 0;
        transition: 0.6s all;
        position: absolute;
        bottom: 20px;
        left: 10px;
        z-index: 3;
      }

      img {
        width: 1.2rem;
      }

      .icon:hover + .info, .icon:focus + .info {
        opacity: 1;
      }
    `;

    // 插入shadow dom Root
    shadow.appendChild(style);
    console.log(style.isConnected);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(info);
  }
}
// 自定义标签
customElements.define('popup-info', PopUpInfo);

</script>
</html>

官方示例
 MDN CODEvue

思考

自定义标签的使用减小了咱们频繁编写一堆冗余、深层嵌套的代码，提升了速率。然而，若是咱们看页面源码会发现customElements.define不会消除自定义标签，自定义标签若是绑定了大量的数据、事件、敏感信息，页面上又彻底显示出来，这就增长前端页面的不安全性。如何保证开发者即便用自定义标签又不会编译自定义标签从而致使DOM的过分挂载和数据的泄漏（不建议remove自定义标签，频繁操做DOM太消耗内存了），值得思考...git