zoukankan      html  css  js  c++  java
  • WebComponent

    WebComponent

    WebComponent可自定义标签,在caniuse网站上看,chrome浏览器是在2018年才完全支持。

    webComponent实现自定义标签封装是由三个技术组成:

    Custome Element:自定义标签、行为
    Shadow DOM:控制元素私有性
    HTML Template:标记模板,可为自定义模板结构重复使用
    

    Custome Element

    自定义元素只需两个步骤

    # 1、创建继承HTMLElement的类
    class SomeTag extends HTMLElement {
    	constructor() {
    		super();//必须要手动调用父类构造
    	}
    }
    
    # 2、注册标签, 第三个参数可选 {extends: 'div'}
    customElements.define('some-tag', SomeTag);
    

    Shadow DOM

    创建一个影子文档,挂载到自定义元素下,形成作用域隔离。

    在自定义元素类中使用入校表达式,添加影子DOM

    # mode: open|close ; 值为close shadowRoot返回null
    var shadow = this.attachShadow({mode: 'open'});
    # element.shadowRoot 自定义标签实例获取影子的实例
    

    附录:

    问题1:Failed to construct 'CustomElement': The result must not have children

    需要注意,如果构造器有添加子节点、获取属性等操作DOM行为,html写该自定义标签浏览器会报错!原因是浏览器加载脚本后需要解析执行脚本,脚本执行时页面可能还没渲染完毕,操作DOM不安全。

    解决办法:用js创建自定义标签的实例,或者自定义标签脚本加上defer属性

    敌人总是会在你最不想它出现的地方出现!
  • 相关阅读:
    【HYSBZ】1588 营业额统计
    【HYSBZ】1503 郁闷的出纳员
    【ZOJ】3228 Searching the String
    【ZOJ】3494 BCD Code
    【HDU】1754 I Hate It
    【HDU】3247 Resource Archiver
    【POJ】3481 Double Queue
    EdgeCore初学习
    go mod常用命令 已经 常见问题
    GO语言内存操作指导—unsafe的使用
  • 原文地址:https://www.cnblogs.com/longhx/p/15741310.html
Copyright © 2011-2022 走看看