4 html5 web components原生组件详细教程

web components 前面我们已经介绍过,这一期我们就来讲一讲具体用法和这其中的关键只是点:

1 基本使用

如果我们想实现一个封装的原生组件,那就离不开使用js去封装,这里主要就是基于HTMLElement这个类,去创建创建一个子类,然后使用customElements.define去页面中注册这个组件。

export class dialog extends HTMLElement {constructor() {super(); // 必须首先调用 super()// 正确的做法if (!this.shadowRoot) {this.attachShadow({ mode: "open" }); // 或者 'closed' 根据需求}// 创建并添加样式到影子DOM中const style = document.createElement("style");style.textContent = `dialog {padding: 0;width: 300px;height: 200px;border: 1px solid #888;}dialog::backdrop {background: rgba(0,0,0,0.5);}dialog .title {box-sizing: border-box;padding: 0 5px;width: 100%;height: 30px;line-height: 30px;color: #fff;background: var(--primary-color);}dialog .close {float: right;cursor: pointer;}dialog .footer{margin-top: 40px;}`;this.shadowRoot.appendChild(style);// 创建并添加元素到影子DOM中const div = document.createElement("div");const mode = this.getAttribute("mode") || "show";const content = this.getAttribute("content") || "我是默认内容";div.classList.add("custom-dialog");const form = `<form method="dialog">${content}<div class="footer"><button type="submit" value="submit">提交</button><button type="submit" value="cancel">取消</button></div></form>`;const dialogContent = `<dialog class="dialog"><div class="title">dialog弹窗 <span class="close">X</span></div><div class="content">${["show", "modal"].includes(mode) ? content : form}</div></dialog><button class="show-dialog">${mode}弹窗</button>`;div.innerHTML = dialogContent;this.shadowRoot.appendChild(div);this.dialog = this.shadowRoot.querySelector(".dialog");const closeEvent = (detail) =>new CustomEvent("onclose", {detail,bubbles: true, // 允许事件冒泡composed: true, // 允许事件穿透shadow DOM});this.shadowRoot.querySelector(".show-dialog").addEventListener("click", () => {if (mode === "show") {this.dialog.show();} else {this.dialog.showModal();}});this.shadowRoot.querySelector(".close").addEventListener("click", () => {this.dialog.close("top");});this.dialog.addEventListener("close", (e) => {// 触发自定义事件this.dispatchEvent(closeEvent(this.dialog.returnValue));});}
}

以上这个代码,我就封装了一个基于html5新标签dialog封装的弹窗组件,一下演示使用方法。

                <custom-dialog></custom-dialog><custom-dialogmode="modal"content="modal模式演示有close监听"></custom-dialog><custom-dialogmode="modal-form"content="modal模式演示带有表单"></custom-dialog>

以上代码我来简单分解下:

1 定义style

首先就是要给shadow Dom中要插入style标签和你自定义内容的html代码,这样来实现样式和html代码封装,主要的还是要实现代码的隔离。当然你接下来的交互,自然也要约束在你组件内部。

2 组件内查找节点

当然你js中节点事件处理,还是要基于this.shadowRoot.querySelector去做节点查找,然后使用原生的方法去做事件监听。

3 自定义事件派发:

 new CustomEvent("onclose", {detail,bubbles: true, // 允许事件冒泡composed: true, // 允许事件穿透shadow DOM});

这里就是定义一个自定义事件,然后使用this.dispatchEvent(closeEvent(this.dialog.returnValue))派发出去。

4 注册组件

接下来我们聊聊这个注册组件,以上代码仅仅是你定义组件,页面上还并不能直接使用。customElements.define(`custom-${i}`, dialog); 使用以上方法,才能在页面上以自己定义的名称使用。

2 插槽使用

插槽的使用给我们页面开发带来很大的方便,这里我们演示一下插槽的使用方法。在web components中插槽沿革执行了,组件的shadow-dom的特性,即插槽部分的样式定义和js是不受shadow-dom的this.shadowRoot的影响的,因为插槽为自定义内容,其内容被渲染也不属于组件shadow-dom内部,所以插槽被渲染出来dom结构并不在组件内部。

1 通过slot来定义插槽

<div slot="desc">纯html+css实现,无法实现更为复杂的功能和交互,而且无法实现shadow-root实现样式隔离</div>

2 使用插槽

在组件内部通过 <slot name="">来使用,如下。

const editorHtml = `<div class="editor-desc"><slot name="desc"></slot></div><div class="editor-code"><div class="code-type">${codeType}</div><div class="code-container"><div class="code-lines"></div><div class="code-content"><slot name="code"></slot></div></div></div>`;

3 插槽的渲染

其渲染出来的效果如图:

f998e35753624121b1ae9f800be7b0dd.png

这里需要特别注意插槽为自定义内容,其内容被渲染也不属于组件shadow-dom内部,所以插槽被渲染出来dom结构并不在组件内部,特别实在做样式控制时要特别注意,需要在使用组件的页面上定义样式。如果是在嵌套环境更要注意。

3 样式部分

因为shadow-dom的特性,我们样式只可以写在组件内部。但是也有一些技巧。这里我分享一个就是做样式分离的方法。

const style = document.createElement("link");style.setAttribute("rel", "stylesheet");style.setAttribute("href", "./src/assets/editor.css");this.shadowRoot.appendChild(style);

 1 分离css方法

创建一个link标签,将样式从外部链接进来,这样就可以不用做style这么麻烦了。

当然后面我再讲一讲如何做html代码分离。

样式分离了,但是这里面又有一个问题就是,样式穿透问题。这里就不得不说几个基于web component的味蕾和和选择器。

:host 这个使用在组件样式内部,表示跟组件。使用这个我们可以约束根组件的样式。通常我们封装的组件都要通过一个div元素放在根组件内部,而这个div通常我们并没有给其设置类名。这时使用这个伪类就比较好。

:host() 只选择自身包含特定选择器的自定义元素;

:host-context() 选择拥有特定选择器父元素的自定义元素。

这些选择器后面详细来讲,这里我主要谈一下,样式的从父级项向下穿透的样式规则和需求。比如我们通常定义样式有全局级别的,页面级别的,还有小组件级别的。但是现在这种shadow-dom样式的完全隔离,向实现其实比较困难。

2 样式控制

我先说第一种:页面级别,其页面级别样式可以直接影响到自己页面本身和插槽的样式,这个也很好理解。因为插槽本身就是就是小组件外的内容,样式的作用域能控制到当前页面,也就能控制当前页面内的插槽。特别是在组件嵌套的情况下,当家控制要是要特别注意。类似于这个:host/:host()都可以往出派生,都比较容易控制。

第二种情况就比较特殊了,就是全局样式。全局样式如果想穿透组件,控制组件内部,其实是比较麻烦的。这里我来详细讲一下。主要使用了::part伪元素。

.page::part(case-container) {margin: 10px 0;border: 1px solid #f6f6f6;
}
.page::part(case-title) {padding: 0 10px;line-height: 25px;font-size: 16px;
}.page::part(case-content) {background-color: #f6f6f6;padding: 10px;
}

3 样式穿透

这里大家看到,这个::part()括号中的是对应的组件.page中part属性的属性值的元素。

c68d15f1e78541c8a0d7001279f2bed6.png

如上图,这些html标签都被协商了part的key-value键值对。

前面的.page大家注意,这个地方本来是要写组件名称的,但如果写组件名称,作用域就太小了,所以我们给由相同需求的组件写一个类名,这样作用范围就更广,来实现更多需求全局样式穿透。

这个地方是给跟组件设置class的方法,建议大家在这个地方处理,这样的化,组件本身就具备了类名。但是::part不能派生,这也是个限制,希望官方后期能更新这个限制。

 this.setAttribute("class", "page");

1121b8f8cce64cb8aeaf8e9984367888.png

今天,就先分享到这,我的第一部分的原生html-web components项目部分已经马上完成,即将和大家见面。大家请关注。 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/143934.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

OpenCV运动分析和目标跟踪(2)累积操作函数accumulateSquare()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 将源图像的平方加到累积器图像中。 该函数将输入图像 src 或其选定区域提升到2的幂次方&#xff0c;然后加到累积器 dst 中&#xff1a; dst ( …

Android WebView H5 Hybrid 混和开发

对于故乡&#xff0c;我忽然有了新的理解&#xff1a;人的故乡&#xff0c;并不止于一块特定的土地&#xff0c;而是一种辽阔无比的心情&#xff0c;不受空间和时间的限制&#xff1b;这心情一经唤起&#xff0c;就是你已经回到了故乡。——《记忆与印象》 前言 移动互联网发展…

用Python画一个五星红旗

#codingutf-8 import turtle import mathdef draw_polygon(aTurtle, size50, n3): 绘制正多边形args:aTurtle: turtle对象实例size: int类型&#xff0c;正多边形的边长n: int类型&#xff0c;是几边形 for i in range(n):aTurtle.forward(size)aTurtle.left(360.0/n)de…

esp32-C2 对接火山引擎实现语音转文本(二)

目录 一、 语音转文本初始化 二、 WedStream 事件处理函数 一、 语音转文本初始化 Volcengine_vtt_handle_t Volcengine_Vtt_Init(Volcengine_vtt_config_t *config) {// 管道配置audio_pipeline_cfg_t pipeline_cfg = DEFAULT_AUDIO_PIPELINE_CONFIG();Volcengine_vtt_t *vt…

【从计算机的发展角度理解编程语言】C、CPP、Java、Python,是偶然还是应时代的产物?

参考目录 前言什么是"computer"?计算机的大致发展历程计算机系统结构阶段(1946~1981)计算机网络和视窗阶段(1982~2007)复杂信息系统阶段(2008~today)人工智能阶段 越新的语言是越好的吗、越值得学习吗&#xff1f; 前言 最近读了 《Python语言程序设计基础》 这本书…

数据结构与算法学习day21-回溯法

一、组合 1.题目 . - 力扣&#xff08;LeetCode&#xff09; 2思路 把组合问题抽象成树形结构&#xff08;N叉树&#xff09; 每次从集合中选取元素&#xff0c;可选择的范围随着选择的进行而收缩&#xff0c;调整可选择的范围。 图中可以发现n相当于树的宽度&#xff0c…

[Linux]进程控制详解

1.创建进程 进程调用fork,当控制转移到内核中的fork代码后&#xff0c;内核做&#xff1a; ● 分配新的内存块和内核数据结构给子进程 ● 将父进程部分数据结构内容拷贝至子进程 ● 添加子进程到系统进程列表当中 ● fork返回&#xff0c;开始调度器调度 这个前面提到过&#…

c++基础入门三

文章目录 C基础入门(三)auto关键字auto简介使用细则一、可以和指针联合使用二、在一行定义多个变量 不能使用场景一、不能作为函数的参数二、不能用来声明数组 基于for的循环使用条件 指针空值nullptr C基础入门(三) 回顾上集&#xff0c;我们介绍了C的函数重载&#xff0c;引…

JAVA并发编程系列之Semaphore信号量剖析

腾讯T2面试&#xff0c;现场限时3分钟限最多20行代码&#xff0c;模拟地铁口安检进站。其中安检入口10个&#xff0c;当前排队人数是100个&#xff0c;每个人安检进站耗时5秒。开始吧! 候选人&#xff0c;心中万马奔腾&#xff01;&#xff01;&#xff01;吐了一口82年老血&am…

电池管理仓的拆解

拆解视频里面可以学习到大厂的设计思想和创意&#xff0c;接触到比较行业化的设计方案&#xff0c;从而提升设计电路的水平。 电池仓&#xff1a; 电池管家的芯片用的就是前段时间了解到的STM32G030C8T6&#xff0c;便宜好用的典范&#xff1a; 弧形走线较为推荐&#xff1a; …

C++初阶学习——探索STL奥秘——标准库中的queue与stack

1、适配器模式 STL 中的适配器可以分为三类: 从应用角度出发 容器适配器 container adapters 迭代器适配器 iterator adapters 仿函数适配器 functor adapters 其中&#xff0c;容器适配器可修改底层为指定容器 如由 vector 构成的栈、由 list 构成的队列 迭代器适配器…

sqli-labs靶场搭建

下载了一个phpstudy进行搭靶场搭建 然后打开phpstudy安装好php,mysql等环境 正式sqli-labs靶场搭建 第一步&#xff1a;下载源码&#xff1a;https://codeload.github.com/Audi-1/sqli-labs/zip/master 解压后放进网站根目录&#xff0c;进到 sqli-labs的文件夹下&#xff0…

windows C++ 并行编程-异步代理库概述

异步代理库&#xff08;简称代理库&#xff09;提供了一个编程模型&#xff0c;该模型可提高支持并发的应用程序开发的可靠性。 代理库是一个 C 模板库&#xff0c;为粗粒度数据流和管道任务提升了基于角色的编程模型和进程内消息传递。 代理库构建在并发运行时的计划和资源管理…

Windows系统通过部署wsl + Goland进行跨平台开发

1.背景 近期项目中因为用到了 Golang库中的 "log/syslog" 包,而这个包是禁止在windows平台上编译的. 并且在windows环境上开发也会有诸多不便,如执行makefile文件的make命令,本地开发环境中docker,etcd,redis的搭建等等,而这些通过部署wsl去搭建一个linux环境就很可以…

如何使用下拉字段创建WordPress表单(简单方法)

许多网站所有者在收集用户输入时&#xff0c;都会因为表单过长而让用户感到压迫。 下拉列表字段通过提供一个简洁的选项列表&#xff0c;使表单变得更简单。这意味着它们可以提高表单完成率&#xff0c;并改善用户体验。 在本文中&#xff0c;我们将向您展示如何创建带有下拉…

Kubernetes从零到精通(11-CNI网络插件)

Kubernetes网络模型 Kubernetes的网络模型&#xff08;Kubernetes Networking Model&#xff09;旨在提供跨所有节点、Pod和服务的统一网络连接。它的核心理念是通过统一的网络通信规则&#xff0c;保证集群中的所有组件能够顺畅地相互通信。Kubernetes网络模型主要有以下几个关…

专业学习|随机规划概观(性质、针对问题与分类)

一、随机规划概观 随机规划&#xff08;Stochastic Programming&#xff09;是一种用于处理决策问题中的不确定性的优化方法。它能够在决策过程中考虑到未来的不确定性&#xff0c;从而帮助找到在不同情境下都能较好表现的解决方案。以下是随机规划能解决的一些主要问题以及它的…

阿里巴巴搜索API返回值:电商市场竞争的新武器含

阿里巴巴搜索API返回值在电商市场竞争中扮演着至关重要的角色&#xff0c;它为企业提供了深入了解市场、分析竞争对手的宝贵资源。以下是对阿里巴巴搜索API返回值及其在电商市场竞争中应用的详细解析&#xff0c;并附上示例代码。 一、阿里巴巴搜索API返回值概述 阿里巴巴搜索…

超大酒店司机收布草-酒店分层管理--酒店布草洗涤

一、大酒店布草分层管理 1. 提高效率 - 对布草进行分层&#xff0c;可以更有针对性地安排收集和分发流程&#xff0c;减少混乱和等待时间&#xff0c;提高整体运营效率。 2. 质量控制 - 不同层级的布草可能有不同的质量标准和使用场景。分层管理有助于确保每个层级的…

2024年第五届“华数杯”全国大学生数学建模竞赛 A题详细思路+详细matlab代码

没有更新完之前,专栏价格为59,更新完毕之后恢复到99. 专栏内包含2024年所有数学建模比赛思路和代码,有些重要比赛着重更新(华数杯、国赛、美赛),小比赛可能会有chatgpt4更新,只需订阅一次。有些文章没有完整代码,请到专栏内查找最新代码和思路。如果比赛结束后没有更新…