自定义组件WebComponents加HTML模板template元素及shadowDOM影子DOM及定义一些事件

  • Web Components 自定义组件，可以自定义一个类似于div的元素，里面的事件可以自定义。
  • template元素 HTML模板，可以把一堆的DOM元素放到一起。
  • shadow DOM 影子DOM，可以在一个元素内放置独属于自己的元素，可配合slot标签做插槽。
    • shadowRoot相当于一个阉割的document，但它只有独立的css作用域而没有独立的js作用域。

加了一些事件

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>WebComponents浏览器原生组件</title>

  </head>

  <body>

    <template id="outTemplate">

      <div>位于自定义组外的HTML无主模版1</div>

      <div>div2</div>

    </template>

    <my-web-component fang="test">

      自定义组件默认插槽内容

      <template> 默认插槽内容 </template>

      <template id="innerTemplate">

        <p>位于自定义组件中的HTML无主模版2</p>

        <div>div2</div>

      </template>

      <template slot="name2-slot">

        <span>name2-slot插槽内容</span>

      </template>

      <h3 slot="name1-slot">name1-slot插槽内容</h3>

    </my-web-component>

    <div>原生div元素</div>

    <span>原生span元素</span>

  </body>

  <script>

    //初始化自定义组件的值。

    class MyWebComponent extends HTMLElement {

      constructor() {

        super();

        this.组件自定义变量 = "初始值";

        console.log("在自定义组件整个生命周期中只会被触发一次。", this);

        this.num = 0;

        //监听事件，并修改自定义事件。实际上可以创建生命周期函数。

        this.addEventListener("click", () => {

          this.num++;

          console.log(this.num);

        });

        this.自定义组件私有方法 = (event) => {

          console.log("自定义组件私有方法", event);

        };

        //设置影子DOM

        const js写的HTML模板 = document.createDocumentFragment(); //手动创建一个template元素。

        js写的HTML模板.appendChild(document.createElement("div"));

        js写的HTML模板.querySelector("div").innerHTML = `

          <p>p1</p>

          <p>自定义组件中用js写的自定义HTML模板中插入的p元素中文本</p>

        `;

        console.log("js写的HTML模板-->", js写的HTML模板);

        const 影子DOM根节点open型 = this.attachShadow({ mode: "open" }); //获取open型的当前组件的影子DOM根节点。

        影子DOM根节点open型.innerHTML = `

          <h1 οnclick="console.log('点击了影子DOM中的标题',[this],[event.target],[event])">影子DOM中的标题</h1>

          <p οnclick="event.target.getRootNode().host.自定义组件私有方法(event)">直接在dom中调用自定义组件私有方法-影子DOM中的p元素</p>

          <div class="slot">

            <span>默认插槽1</span>

            <slot>默认插槽slot空的默认值</slot>

          </div>

          <div class="name1-slot">

            <span>具名插槽1</span>

            <slot name="name1-slot">具名插槽slot name="name1-slot"的默认值</slot>

          </div>

          <div class="default-slot">

            <span>默认插槽2</span>

            <slot name="default">默认插槽slot name="default"的默认值</slot>

          </div>

          <div class="name2-slot">

            <span>具名插槽2</span>

            <slot name="name2-slot">具名插槽slot name="name2-slot"的默认值</slot>

          </div>

          <div οnclick="自定义组件私有方法(event.target,'点击了影子DOM中的div元素1')">影子DOM中的div元素1</div>

          <div class="last-div">影子DOM中的div元素2</div>

          <style>

            div{border: 1px solid rgb(255,255,0);}

            p{font-size:20px;font-weight:100;}

            .slot{color:red}

            .default-slot{color:green}

            .name1-slot{color:blue}

            .name2-slot{color:pink}

            .last-div{cursor:pointer}

          </style>

          <script>

            //不执行这些代码

            var 影子DOM内自定义方法 = (event,说明=''){

              console.log(说明, event)

            }

            影子DOM内自定义方法('影子DOM内自定义方法')

          <\/script>

        `;

        this.shadowRoot.appendChild(js写的HTML模板); //设置了this.attachShadow()后this.shadowRoot才有值。

        const 影子DOM事件方法 = (event) => {

          console.log("自定义组件专属函数", event);

        };

        this.shadowRoot

          .querySelector(".last-div")

          .addEventListener("click", 影子DOM事件方法);

        console.log("影子DOM根节点open型-->", 影子DOM根节点open型);

      }

      自定义组件上的自定义方法(event, 说明 = "") {

        console.log(说明, event);

      }

      connectedCallback(event) {

        console.log("组件被加到DOM上或在节点树中移动时触发。", event);

      }

      disconnectedCallback(event) {

        console.log("当组件被从DOM上移除时触发。", event);

      }

      adoptedCallback(event) {

        console.log("组件被document.adoptNode()移动到新文档时触发", event);

      }

      attributeChangedCallback(name, oldValue, newValue) {

        console.log("当组件的attribute改变时触发", name, oldValue, newValue);

      }

      observedAttributes(value) {

        console.log("observedAttributes()，在这里返回自定义元素的属性", value);

        console.log("this.组件自定义变量--->", this.组件自定义变量);

        return ["fang"];

      }

      get fang() {

        console.log(value, "get fang()", this.组件自定义变量);

        this.getAttribute("fang") || "";

      }

      set fang(value) {

        console.log(value, "get fang()", this.组件自定义变量);

        this.组件自定义变量 = "初始值" + value;

        this.setAttribute("fang", value);

      }

    }

    //注册自定义组件;

    window.customElements.define("my-web-component", MyWebComponent);

  </script>

</html>

参考

  1. Web组件API – 自定义组件要看
  2. 原生js也可以自定义组件
  3. 深入理解Web Components
  4. Web Components-MDN文档
  5. HTML Imports - 在当前文档中导入html文档并使用其中的一部分
  6. 利用废弃的html rel import实现页面include功能 - 就是用自定义组件来实现
  7. HTMLUnknownElement与HTML5自定义元素的故事 - 自定义组件的来源
  8. HTMLUnknownElement - 无效的HTML元素 - MDN文档
  9. 影子DOM v1: 自足的Web组件 - 关于一个web组件的详细讲解
  10. <slot> - MDN文档
  11. 把富文本封装在 shadow DOM 中，要注意些啥？ - shadowRoot 相当于一个阉割的 document，但它只有独立的 css 作用域而没有独立的 js 作用域
  12. 使用 shadow DOM - MDN
  13. html通过模板字符串写入script标签
  14. 原生js绑定事件的方法和dom操作
  15. shadow DOM的介绍和使用
  16. 影子节点ShadowDOM – 自定义组件要看

自定义组件WebComponents加HTML模板template元素及shadowDOM影子DOM及定义一些事件的更多相关文章

  1. 自定义元素–为你的HTML代码定义新元素

    注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMa ...

  2. Vue 组件6内联模板

    如果子组件有inline-template特性,组件将把它的内容当做模板,而不是把它当做分发内容,这样模板更灵活. <my-component inline-template> <d ...

  3. 设置tabBar、使用第三方插件和自定义组件使用简单实例

    创建小程序项目进入时填写,因需要用上第三方插件,所以要填上开发者的APPID,前往微信公众平台去注册一个账号获取APPID,在设置=>开发设置可以查看相关appid信息 简单思路 底部导航添加三 ...

  4. axure复用-自定义组件,母版(模板)

    组件(控件)是用于设计线框图的用户界面元素.在组件(控件)面板中包含有常用的控件库,如按钮.图片.文本框等.从组件面板中拖动一个控件到线框图区域中,就可以添加一个组件.组件可以从一个线框图中被拷贝(C ...

  5. Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用

    template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...

  6. 在Vue.js2.0中组件模板子元素数量问题

    在Vue中当利用组件进行开发时候,组件所使用的模板只可以应用于一个根实例,当你需要添加多个子元素的时候,可以用一个div将它们包裹起来,代码如下: <template id="task ...

  7. 微信小程序开发--模板(template)使用，数据加载，点击交互

    微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...

  8. iview table里面 插入下拉列表组件（自定义组件）一定要加key，不加key，table开始会加载所有数据，然后再从第2页点回第一页，就会走onChange事件，混乱的逻辑，切记加：key

    iview table里面 插入下拉列表组件(自定义组件)一定要加key,不加key,table开始会加载所有数据,然后再从第2页点回第一页,就会走onChange事件,混乱的逻辑,切记加:key 关 ...

  9. angular4自定义组件非input元素实现ngModel双向数据绑定

    在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...

  10. vue 上拉加载自定义组件，超好用哦

    1.创建组件components > zj-roll > index.vue <template> <div> <slot></slot> ...

随机推荐

  1. [转帖]JMETER结果分析

    https://www.cnblogs.com/a00ium/p/10462892.html 我相信你同意:有很多方法可以收集和解释JMeter结果,你会感到迷茫. 嗯,看完这篇文章后,您将了解收集和 ...

  2. XCODE IOS 静态链接库替换升级

    XCODE 版本15.2. 一个很久需求没更新的IOS 应用,近来有新需求要开发. 拉下代码运行,出现了个BAD_ACCESS错误.出错的位置位于一个调用的第三方的.a静态库内部.因为调用代码并没有修 ...

  3. 用户 'NT Service\SSISScaleOutMaster140' 登录失败

    用户 'NT Service\SSISScaleOutMaster140' 登录失败. 原因: 找不到与提供的名称匹配的登录名. 项目情况: 用户 'NT Service\SSISScaleOutMa ...

  4. 发布.net core应用程序并部署到IIS上

    一.在项目里右击选择发布点击启动配置如下图所示 二.在打开的发布选项选择 配置 Release或DeBug ,目标框架选择对应的.net Core版本默认就行,部署模式有两种选择 1.框架依赖---- ...

  5. 没有安装vs通过Rider编译Dll

    没安装vs怎样生成dll? 比起VS那庞大的体积和编码效率,我还是更喜欢使用Rider(和VS的神级插件Resharper是同一家公司的产品),那么在没有安装VS的电脑上是否可以在命令行下把C#代码生 ...

  6. 常见的for循环优化方式

    ?> 前言 经常使用一些循环,进行耗时计算的操作,特别是 for 循环,它是一种重复计算的操作,如果处理不好,耗时就比较大,如果处理书写得当,将大大提高效率,下面总结几条 for 循环的常见优化 ...

  7. MySQL 常见面试题/知识点总结！（2021 最新版）| JavaGuide

    相关阅读: 2.7w字!Java基础面试题/知识点总结!(2021 最新版) 这篇文章之前发过,不过,我最近对其进行了重构完善并且修复了很多小问题.所以,在公号再同步一下! 内容很硬!强烈建议小伙伴们 ...

  8. PaddleHub实战篇{词法分析模型LAC、情感分类ERNIE Tiny}训练、部署【三】

     相关文章: 基础知识介绍: [一]ERNIE:飞桨开源开发套件,入门学习,看看行业顶尖持续学习语义理解框架,如何取得世界多个实战的SOTA效果?_汀.的博客-CSDN博客_ernie模型 百度飞桨: ...

  9. gym.spaces中找不到prng解决方案

    gym.spaces中找不到prng解决方案 在运行飞桨MADDPG问题是遇到模型无法导入不存的的问题: ModuleNotFoundError: No module named 'multiagen ...

  10. 3.1 C/C++ 使用字符与指针

    C/C++语言是一种通用的编程语言,具有高效.灵活和可移植等特点.C语言主要用于系统编程,如操作系统.编译器.数据库等:C语言是C语言的扩展,增加了面向对象编程的特性,适用于大型软件系统.图形用户界面 ...