Web Components初探

组件化,标签语义化,是前端发展的趋势。现在流行的组件化框架有React、Vue等,标签语义化在H5中添加的article、dialog等。
Web Components 就是类似的一套技术,允许您创建可重用的定制元素,并且在您的web应用中使用它们。

Web Components由三项主要技术组成,它们可以一起使用来创建封装功能的定制元素,可以在你喜欢的任何地方重用,不必担心代码冲突。

  • **Custom elements(自定义元素):**一组JavaScript API,允许您定义custom elements及其行为,然后可以在您的用户界面中按照需要使用它们。
  • Shadow DOM(影子DOM):一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
  • HTML templates(HTML模板): <template><slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
实现web component的基本方法通常如下所示:
  1. 创建一个类或函数来指定web组件的功能,如果使用类,请使用 ECMAScript 2015 的类语法(参阅类获取更多信息)。
  2. 使用 CustomElementRegistry.define() 方法注册您的新自定义元素 ,并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
  3. 如果需要的话,使用Element.attachShadow() 方法将一个shadow DOM附加到自定义元素上。使用通常的DOM方法向shadow DOM中添加子元素、事件监听器等等。
  4. 如果需要的话,使用 <template><slot> 定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。
  5. 在页面任何您喜欢的位置使用自定义元素,就像使用常规HTML元素那样。

简单做一个显示文本的例子,感受以下Web Components代码如下:

main.js
class ShowText extends HTMLElement {constructor() {super()}connectedCallback() {const text = this.getAttribute('text');this.outerHTML = `<div style="color: red;">文本为: <label>${text}</label></div>`;}
}customElements.define('show-text', ShowText);
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./main.js"></script>
</head>
<body><show-text text="hello world"></show-text><show-text text="你好"></show-text>
</body>
</html>

测试结果

接下来会一个知识点一个知识点慢慢梳理~
参考地址:https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

如果文章能够对您有所帮助,我便感到十分荣幸。如若文章能被您点赞,那便是万分荣幸。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网约车APP小程序源码代驾顺风拼车货运司乘端安卓苹果源码可二开

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 一、详细介绍 系统是基于Thinkphpuniapp开发的&#xff0c;全开源未加密&#xff0c;这套源码可以拿回去自己做二开 后台用户端司机端 功能详情介绍&#xff1a; 车主实名认证&#xff0c;驾驶证认证&#xff0c;车…

【C++】快速判断元音字母,让代码不在繁琐!!

目录 一、前言 二、判断字符是否为元音字母 ✨ 繁琐的方法 ✨ 神奇又快速的方法 三、常考面试题 四、共勉 一、前言 大家有没有发现&#xff0c;我们在做算法题的时候&#xff0c;经常会碰到让我们判断一个字母是否为 元音字母&#xff0c;可是用通常的 if 条件判断 要繁…

centos7 装 docker-ce

安装必要的系统工具&#xff1a; sudo yum install -y yum-utils device-mapper-persistent-data lvm2 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 命令会以超级用户的身份安装三个软件包&#xff1a;yum-utils&#xff0c;device-mapper-persistent-…

Linux线程互斥

1.用线程封装代码测试通过现象引出线程互斥 1.1代码测试 Thread.hpp #pragma once #include<iostream> #include<string> #include<functional> #include<pthread.h> template<class T> using func_t std::function<void(T)>;template…

为什么Python不适合写游戏?

知乎上有热门个问题&#xff1a;Python 能写游戏吗&#xff1f;有没有什么开源项目&#xff1f; Python可以开发游戏&#xff0c;但不是好的选择 Python作为脚本语言&#xff0c;一般很少用来开发游戏&#xff0c;但也有不少大型游戏有Python的身影&#xff0c;比如&#xff1…

【Linux】详解进程程序替换

一、替换原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支)&#xff0c;子进程往往要调用一种exec函数以执行另一个程序。当进程调用一种exec函数时&#xff0c;该进程的用户空间代码和数据完全被新程序替换&#xff0c;从新程序的启动例程开始执…

Mysql数据库——高级SQL语句补充

目录 一、子查询——Subquery 1.环境准备 2.In——查询已知的值的数据记录 2.1子查询——Insert 2.2子查询——Update 2.3子查询——Delete 3.Not In——表示否定&#xff0c;不在子查询的结果集里 3.Exists——判断查询结果集是否为空 4.子查询——别名 二、视图—…

PointNet++点云处理原理

PointNet点云处理原理 借鉴了多层神经网络的思想 pointnet要么是一个点&#xff0c;要么是所有点进行操作&#xff0c;就不会有局部上下文信息 pointnet基本思想是迭代地应用到局部区域 1.多级别特征学习 2.旋转不变性 3.置换不变性 选取中心点centroid&#xff0c;通过poi…

jconsole jvisualvm

jconsole 打开方式 命令行输入 jconsole双击想要连接的应用 界面展示 jvisualvm 打开方式 命令行输入 jvisualvm双击想要连接的应用 可以安装插件&#xff0c;比如 Visual GC 直观看到 GC 过程

在CentOS7上部署Nginx并测试指南

Nginx部署测试 Nginx简介 Nginx是俄罗斯人Igor Sysoev编写的一款高性能的HTTP和反向代理服务器。 Nginx选择了epoll和kqueue作为网络I/O模型&#xff0c;在高连接并发的情况下&#xff0c;内存、CPU等系统资源消耗非常低&#xff0c;运行稳定。 正向代理与反向代理 正向代…

Java学习记录第十三天

面向对象编程 核心思想就是OOP&#xff08;面向对象编程&#xff09; 面向过程&面向对象 面向过程思想 步骤清晰简单&#xff0c;第一步做什么&#xff0c;第二步做什么... 面对过程适合处理一些较为简单的问题 面向对象思想 物以类聚&#xff0c;分类的思维模式&…

电源噪声的起因及危害

对造成电源不稳定的根源进行简单分析如下,主要在于两个方面:一是器件高速开关状态下,瞬态的交变电流过大;二是电流回路上存在的电感。从表现形式上来看又可以分为三类:同步开关噪声(SSN),有时被称为Δi噪声,地弹(Ground bounce)现象也可归于此类(图1-a);非理想电…

2024.3.21 QT

QT登录界面设计&#xff1a; //头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMovie>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nu…

Linux manim安装

简介 根据文档可知, manim目前分为两个版本, 一个是由3Blue1Brown维护更新的最新版本的manimgl, 另一个是稳定的社区版本manim or manimce. 两个版本在安装和使用上都有些不同, 不要搞混. Linux manim ERROR No package ‘pangocairo’ found Getting requirements to buil…

C++进阶之路---C++11新特性 | lambda表达式

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 前言&#xff1a;简介lambda 在C中&#xff0c;lambda表达式是一种匿名函数的方式&#xff0c;它可以用来解决以下问题&a…

稀碎从零算法笔记Day26-LeetCode:跳跃游戏

断更多天&#xff0c;懒狗ex 题型&#xff1a;数组、模拟、类似双指针&#xff1f; 链接&#xff1a;55. 跳跃游戏 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组…

【Diffusers库】第四篇 训练一个扩散模型(Unconditional)

目录 写在前面的话下载数据模型配置文件加载数据创建一个UNet2DModel创建一个调度器训练模型完整版代码&#xff1a; 写在前面的话 这是我们研发的用于 消费决策的AI助理 &#xff0c;我们会持续优化&#xff0c;欢迎体验与反馈。微信扫描二维码&#xff0c;添加即可。   官方…

uni-app中web-view的使用

1. uni-app中web-view的使用 uni-app中的web-view是一个 web 浏览器组件&#xff0c;可以用来承载网页的容器&#xff0c;uni-app开发的app与web-view实现交互的方式相关简单&#xff0c;应用通过属性message绑定触发事件&#xff0c;然后在web-view的网页向应用 postMessage 触…

遥感卫星影像质量评价指标汇总

1. 主观评价方法 以人为图像的评价者&#xff0c;根据自己的评价尺度和经验对图像质量进行评价。 2. 客观评价方法 1)均方差 2)信噪比 主要用来评价影像经压缩、传输、增强等处理前后的质量变化情况&#xff0c;其本质与均方差类似。 3)方差 反映了图像各个像元灰度相对…

18.字面量

文章目录 一、字面量二、区分技巧三、扩展&#xff1a; /t 制表符 一、字面量 在有些资料&#xff0c;会把字面量说成常量、字面值常量&#xff0c;这种叫法都不是很正确&#xff0c;最正确的叫法还是叫做&#xff1a;字面量。 作用&#xff1a;告诉程序员&#xff0c;数据在…