自定义标签的编码

chaosx110 发布于2019-08-02 14:25 / 2909人阅读

摘要：，，优化样式插入自定义标签官方示例思考自定义标签的使用减少了我们频繁编写一堆冗余深层嵌套的代码，提高了速率。

customElements.define

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

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

attachShadow

官方文档对于shadow DOM解释很模糊，简单的说就是DOM的"一体双魂"，拥有同样的函数和方法，但是Shadow DOM比被附加DOM更多的功能，前者具有独自的作用域，并且与外界DOM分隔。（这个作用就是shadow DOM的核心功能，它可以使你编写的DOM与css与其他区域互不影响，相当于vue中css样式的作用）；
shadow DOM弥补了customElements缺少隔离作用域（DOM和css作用域）的缺陷。

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

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

代码示范

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



  
    
    Pop-up info box — web components
  
  
    Pop-up info widget - web components

    
      
        Enter your CVC

官方示例
MDN CODE

思考

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

服务器托管超融合服务器自定义编码自定义标签 xml自定义标签自定义标签html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53796.html

自定义标签的编码

摘要：，，优化样式插入自定义标签官方示例思考自定义标签的使用减少了我们频繁编写一堆冗余深层嵌套的代码，提高了速率。 customElements.define 在MDN官方文档中，如果你想要使用自定义标签，可以使用customElement类中define方法（IE7以下浏览器不支持），使用：customElements.define(myselfTagName, myselfClass, ...

ernest.wang 2019-08-23 15:40 评论0 收藏0
HTML编码规范建议

摘要：示例强制对中规定允许省略的闭合标签，不允许省略闭合标签。示例图片强制禁止的取值为空。示例提交取消取消提交建议当使用进行表单提交时，如果条件允许，应使原生提交功能正常工作。示例建议模板代码应以保证单个标签语法的正确性为基本原则。这段时间在整理前端部分代码规范，初步想法是从HTML、CSS、Javascipt、项目文件目录四部分是整理。之前已经整理完了CSS编码规范，有兴趣可以了解下 1...

dmlllll 2019-08-05 17:54 评论0 收藏0
HTML编码规范建议

摘要：示例强制对中规定允许省略的闭合标签，不允许省略闭合标签。示例图片强制禁止的取值为空。示例提交取消取消提交建议当使用进行表单提交时，如果条件允许，应使原生提交功能正常工作。示例建议模板代码应以保证单个标签语法的正确性为基本原则。这段时间在整理前端部分代码规范，初步想法是从HTML、CSS、Javascipt、项目文件目录四部分是整理。之前已经整理完了CSS编码规范，有兴趣可以了解下 1...

sunnyxd 2019-08-01 17:02 评论0 收藏0
机器学习“特征编码”的经验分享：鱼还是熊掌？

摘要：特征编码类型本篇，我们主要说一下分类型特征的编码方式。下面，我们要对这个变量进行编码，在中有现成的独热编码方法，代码如下原来的变量被拆分为两个单独的变量，这两个变量就是原来的分类特征值有电梯和无电梯。作者：xiaoyu 微信公众号：Python数据科学知乎：python数据分析师 showImg(https://segmentfault.com/img/remote/146000...

trilever 2019-06-26 18:31 评论0 收藏0
机器学习“特征编码”的经验分享：鱼还是熊掌？

摘要：特征编码类型本篇，我们主要说一下分类型特征的编码方式。下面，我们要对这个变量进行编码，在中有现成的独热编码方法，代码如下原来的变量被拆分为两个单独的变量，这两个变量就是原来的分类特征值有电梯和无电梯。作者：xiaoyu 微信公众号：Python数据科学知乎：python数据分析师 showImg(https://segmentfault.com/img/remote/146000...

JinB 2019-07-30 17:29 评论0 收藏0