自定义组件WebComponents加HTML模板template元素及shadowDOM影子DOM及定义一些事件
自定义组件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>
参考
- Web组件API – 自定义组件要看
- 原生js也可以自定义组件
- 深入理解Web Components
- Web Components-MDN文档
- HTML Imports - 在当前文档中导入html文档并使用其中的一部分
- 利用废弃的html rel import实现页面include功能 - 就是用自定义组件来实现
- HTMLUnknownElement与HTML5自定义元素的故事 - 自定义组件的来源
- HTMLUnknownElement - 无效的HTML元素 - MDN文档
- 影子DOM v1: 自足的Web组件 - 关于一个web组件的详细讲解
<slot>- MDN文档- 把富文本封装在 shadow DOM 中，要注意些啥？ - shadowRoot 相当于一个阉割的 document，但它只有独立的 css 作用域而没有独立的 js 作用域
- 使用 shadow DOM - MDN
- html通过模板字符串写入script标签
- 原生js绑定事件的方法和dom操作
- shadow DOM的介绍和使用
- 影子节点ShadowDOM – 自定义组件要看
自定义组件WebComponents加HTML模板template元素及shadowDOM影子DOM及定义一些事件的更多相关文章
- 自定义元素–为你的HTML代码定义新元素
注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMa ...
- Vue 组件6内联模板
如果子组件有inline-template特性,组件将把它的内容当做模板,而不是把它当做分发内容,这样模板更灵活. <my-component inline-template> <d ...
- 设置tabBar、使用第三方插件和自定义组件使用简单实例
创建小程序项目进入时填写,因需要用上第三方插件,所以要填上开发者的APPID,前往微信公众平台去注册一个账号获取APPID,在设置=>开发设置可以查看相关appid信息 简单思路 底部导航添加三 ...
- axure复用-自定义组件,母版(模板)
组件(控件)是用于设计线框图的用户界面元素.在组件(控件)面板中包含有常用的控件库,如按钮.图片.文本框等.从组件面板中拖动一个控件到线框图区域中,就可以添加一个组件.组件可以从一个线框图中被拷贝(C ...
- Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用
template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...
- 在Vue.js2.0中组件模板子元素数量问题
在Vue中当利用组件进行开发时候,组件所使用的模板只可以应用于一个根实例,当你需要添加多个子元素的时候,可以用一个div将它们包裹起来,代码如下: <template id="task ...
- 微信小程序开发--模板(template)使用，数据加载，点击交互
微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...
- iview table里面 插入下拉列表组件（自定义组件）一定要加key，不加key，table开始会加载所有数据，然后再从第2页点回第一页，就会走onChange事件，混乱的逻辑，切记加：key
iview table里面 插入下拉列表组件(自定义组件)一定要加key,不加key,table开始会加载所有数据,然后再从第2页点回第一页,就会走onChange事件,混乱的逻辑,切记加:key 关 ...
- angular4自定义组件非input元素实现ngModel双向数据绑定
在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...
- vue 上拉加载自定义组件，超好用哦
1.创建组件components > zj-roll > index.vue <template> <div> <slot></slot> ...
随机推荐
- [转帖]《Linux性能优化实战》笔记（22）—— 网络丢包问题分析
所谓丢包,是指在网络数据的收发过程中,由于种种原因,数据包还没传输到应用程序中,就被丢弃了.这些被丢弃包的数量,除以总的传输包数,也就是我们常说的丢包率.丢包率是网络性能中最核心的指标之一.丢包通常会 ...
- 【转帖】读懂什么是RDMA
一.什么是RDMA1.RDMA主要体现 2.如何理解RDMA和TCP技术的区别?3.使用RDMA的好处包括: 二.什么是RoCE?1. RDMA协议包含:Infiniband(IB)2. 为什 ...
- [转帖]人人都应该知道的CPU缓存运行效率
https://zhuanlan.zhihu.com/p/628017496 提到CPU性能,大部分同学想到的都是CPU利用率,这个指标确实应该首先被关注.但是除了利用率之外,还有很容易被人忽视的指标 ...
- [转帖]kill 参数表
https://www.cnblogs.com/alix-1988/p/14331898.html kill命令格式:kill -Signal pidpid是进程号,可以用 ps 命令查出 signa ...
- [转帖]【JVM】JVM源码分析之Metaspace解密
概述 metaspace,顾名思义,元数据空间,专门用来存元数据的,它是jdk8里特有的数据结构用来替代perm,这块空间很有自己的特点,前段时间公司这块的问题太多了,主要是因为升级了中间件所致,看到 ...
- HTTPD 搭建正向代理 使无网络访问权限的服务器能够访问互联网服务的快捷办法
背景 公司有保密要求比较高,数据安全要求比较高的企业客户,要求核心业务服务器部允许直接访问互联网,但是因为我们有一些OCR识别以及发票查验等的场景需要连接云端的服务才可以正常使用, 所以这里面就存在安 ...
- vim 从嫌弃到依赖(10)——缓冲区列表
之前的一系列文章主要介绍了vim文本相关的操作,并且也介绍了vim的几种模式.通过前面的内容,相信各位小伙伴们已经对vim有了一个基本的了解,同时也能够使用vim快速编辑文本,从这篇开始,我们将要介绍 ...
- vim 从嫌弃到依赖(8)——使用命令模式编辑文本
通过前面的文章,我们已经介绍了vim的普通模式.插入模式.可视模式.接下来让我们接着介绍vim中另一个强大的模式--命令行模式 命令模式简介 命令模式可以说在vim中的使用频率不亚于普通模式,像我们平 ...
- Origin2017、Origin2018详细安装教程
1.Origin2017安装 1.1 安装步骤: 解压安装包,打开"Origin2017"目录,双击"setup.exe"开始安装 安装步骤1,点击[下一步] ...
- BAT大厂面试的100道考题【算法、源码、架构、中间件、设计模式、网络、项目】，过60分的不到10%
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 独生子女生娃,没救了! 考题:https://docs.qq.com/form/page/DT ...