自定义标签的编码

栏目: CSS · 发布时间: 5年前

内容简介：As a web freshman, we having to make do with a long, nested batch of elements that together provide a custom page feature. however, some of frame often to ues custom elements and looks so cool or 逼格(how translate it ??)，so, questing begging, how could we u

题记

As a web freshman, we having to make do with a long, nested batch of elements that together provide a custom page feature. however, some of frame often to ues custom elements and looks so cool or 逼格(how translate it ??)，so, questing begging, how could we use the custom element and achieve it ??

MDN Official Documents just having some of unclear， so let's Simple and clear it!!

核心函数 customElements.define

在MDN官方文档中，如果你想要使用自定义标签，可以使用customElement类中define方法（IE浏览器默默离开...），

使用：customElements.define('myselfTagName', myselfClass, extendsObj);

参数：

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作用域）的缺陷。

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

this: shadom 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>

以上所述就是小编给大家介绍的《自定义标签的编码》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

JSP信息系统开发实例精选

赛奎春 / 机械工业出版社 / 2006-1 / 44.00元

本书精选了大学生就业求职网、物流短信平台、化奥汽车销售集团网站、佳美网络购物中心、科研成果申报管理系统、安瑞奥国际商务不院招生网、明日宽带影院、雄霸天下游戏网等8个综合的网络信息系统工程作为案例，深入剖析了实际的网络信息系统的开发思路、方法和技巧。帮助读者透彻掌握JSP开发网络信息系统的方法和步骤，从而设计出具有实用价值和商用价值的信息系统。　　本书产例具有很强的实用性和工程实践性，在讲解......一起来看看《JSP信息系统开发实例精选》这本书的介绍吧!

码农工具