当前位置： 首页 > news >正文

Web Components

news 2026/3/30 22:09:36

Web Components标准非常重要的一个特性是，它使开发者能够将HTML页面的功能封装为custom elements（自定义标签），可以使用CustomElementRegistry来管理自定义标签

<script>//1、创建自定义标签class NewElement extends HTMLElement {constructor () {super();// 在此定义自定义标签// 创建一个shadow根标签let shadow = this.attachShadow({mode: 'open'});// 创建我们需要的标签let wrapper = document.createElement('div');let iconBox = document.createElement('div');let textBox = document.createElement('div');// 为标签添加样式wrapper.setAttribute('class', 'wapper');iconBox.setAttribute('class', 'icon');textBox.setAttribute('class', 'text');let text = this.getAttribute('text'); // 获取标签里面传递的值textBox.textContent = text;let imgUrl;if(this.hasAttribute('img')) {imgUrl = this.getAttribute('img');} else {imgUrl = 'default.png'; // 设置一个默认图片}var img = document.createElement('img');img.src = imgUrl;iconBox.appendChild(img);// 书写样式var style = document.createElement('style');let lStyleStr = '.wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px;}';lStyleStr += '.icon {margin-right: 10px; width: 50px; height: 50px;}';lStyleStr += '.icon img { width: 100%; height: 100%;}';lStyleStr += '.text { flex: 1; font-size: 14px; color: #333; line-height: 50px;}';style.textContent = lStyleStr;// 将样式和dom元素挂载到页面shadow.appendChild(style);shadow.appendChild(wrapper);wrapper.appendChild(iconBox);wrapper.appendChild(textBox);}}//2、注册自定义标签customElements.define('new-element', NewElement);    
</script>//3、使用
<body><new-element img="you_picture.jpg" text="你的文字"></new-element>
</body>

 

相关文章：

Web Components

Web Components标准非常重要的一个特性是&#xff0c;它使开发者能够将HTML页面的功能封装为custom elements&#xff08;自定义标签&#xff09;&#xff0c;可以使用CustomElementRegistry来管理自定义标签 <script>//1、创建自定义标签class NewElement extends HTML…...

编程日记 2023/8/26 4:19:19

IT运维软件的费用是多少？

正常一套IT运维软件费用一般在5千-50万之间不等&#xff0c;而且分为一次性付费或年付费模式&#xff0c;付费方式导致的价格也不同。 正常情况下IT运维软件的具体价格&#xff0c;是需要根据企业的实际需求来进行综合评估&#xff0c;一般来说&#xff0c;影响具体价格费用有以…...

编程日记 2023/8/26 4:18:17

基于Three.js的WebXR渲染入门

1、Three.js 渲染管线快速概览 我不会花太多时间讨论 Three.JS 渲染管道的工作原理，因为它在互联网上有详细记录（例如，此链接）。 我将在下图中列出基础知识，以便更容易理解各个部分的去向。 2、WebXR 设备 API 入门 在我们深入了解 WebXR API 本身之前，您应该知道 WebX…...

编程日记 2023/8/26 4:17:16

resource doesn‘t have a corresponding Go package.

resource doesnt have a corresponding Go package. GO这个鬼东西不能直接放src下。 ************ Building Go project: ProjectGoTest ************with GOPATH: D:\Go;D:\eclipse-jee-oxygen-2-win32-x86_64\workspace\ProjectGoTest >> Running: D:\Go\bin\go.exe …...

编程日记 2023/8/26 4:16:13

【微服务】微服务调用原理及服务治理

本文通过图文结合&#xff0c;简要讲述微服务的调用原理&#xff0c;以及服务治理的相关概念。 1.微服务的调用原理 举个栗子&#xff1a;你去会所洗脚。首先&#xff0c;技师肯定要先去会所应聘&#xff0c;通过之后&#xff0c;会所会记录该技师的信息和技能&#xff0c;然后…...

编程日记 2023/8/26 4:15:11

【在Windows下搭建Tomcat HTTP服务】

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…...

编程日记 2023/8/26 4:14:10

前端Vue3框架知识点大全

Vue.js是一种流行的JavaScript前端框架&#xff0c;它的第三个版本Vue3带来了许多令人兴奋的新特性和改进。 1、响应式数据&#xff1a; Vue 3采用了基于Proxy的响应式系统&#xff0c;相比Vue 2中的Object.defineProperty&#xff0c;Proxy提供了更强大和灵活的拦截器&#…...

编程日记 2023/8/26 4:13:08

C语言练习2（巩固提升）

C语言练习2 选择题 前言 “志之所趋&#xff0c;无远弗届&#xff0c;穷山距海&#xff0c;不能限也。”对想做爱做的事要敢试敢为&#xff0c;努力从无到有、从小到大&#xff0c;把理想变为现实。要敢于做先锋&#xff0c;而不做过客、当看客&#xff0c;让创新成为青春远航的…...

编程日记 2023/8/26 4:12:07

Vulnhub: DriftingBlues: 1靶机

kali&#xff1a;192.168.111.111 靶机&#xff1a;192.168.111.215 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.215 80端口首页源码 访问noteforkingfish.txt&#xff0c;发现为Ook!加密的密文 解密后提示需要用户eric和修改hosts文件&…...

编程日记 2023/8/26 4:11:06

Android项目如何上传Gitee仓库

前言 最近Android项目比较多&#xff0c;我都是把Android项目上传到Gitee中去&#xff0c;GitHub的话我用的少&#xff0c;可能我还是更喜欢Gitee吧&#xff0c;毕竟Gitee仓库用起来更加方便 一. 创建Gitee仓库 1. 先创建一个Gitee账号&#xff0c;然后登录上去 2. 创建Androi…...

编程日记 2023/8/26 4:10:03

MySQL——基础——联合查询

联合查询 - union,union all 对于union查询,就是把多次查询的结果合并起来,形成一个新的查询结果集 SELECT 字段列表 FROM 表A ... UNION [ALL] SELECT 字段列表 FROM 表B ...; 1.将薪资低于5000的员工,和 年龄大于50的员工全部查询出来 use itcast; select * from participat…...

编程日记 2023/8/26 4:09:01

Vue3+Vite 初始化Cesium

Vue3Vite 初始化Cesium 安装依赖 yarn add cesium yarn add vite-plugin-cesium -D加载vite-plugin-cesium插件 import { defineConfig } from vite import vue from vitejs/plugin-vue import cesium from vite-plugin-cesium;export default defineConfig({plugins: [vue(…...

编程日记 2023/8/26 4:07:59

c++内存地址分配

...

编程日记 2023/8/26 4:06:57

改进YOLO系列：9.添加S2Attention注意力机制

添加S2Attention注意力机制 1. S2Attention注意力机制论文２. S2Attention注意力机制原理３. S2Attention注意力机制的配置３.１common.py配置３.２yolo.py配置３.３yaml文件配置1. S2Attention注意力机制论文 论文题目：S 2 -MLPV2: IMPROVED SPATIAL-SHIFT MLP ARCHITECTURE…...

编程日记 2023/8/26 4:05:56

微服务Feign组件远程调用自定义解码器

Feign远程调用响应结果格式 public class Result<T> {/*** 响应码&#xff0c;200为成功*/private Integer code;/*** 响应信息*/private String message;/*** 响应的具体对象*/private T data; }自定义Feign解码器 Component // 注入Spring的IOC容器中&#xff0c;所有…...

编程日记 2023/8/26 4:04:55

FairyGUI编辑器自定义菜单扩展插件

本文涉及到的软件有&#xff1a;FairyGUI&#xff0c;VSCode 代码环境涉及到了&#xff1a;Lua VSCode插件&#xff1a;EmmyLua 在编写FairyGUI编辑器菜单前&#xff0c;了解一下FairyGUIEditor的API会有效的帮助我们解决很多问题。FairyGUI的扩展是通过编辑器自带的插件功能…...

编程日记 2023/8/26 4:03:54

若依二次开发

目录 本地启动 前端代码 后端代码 代码适配 数据表初始化 远程部署...

编程日记 2023/8/26 4:02:52

安全（权限）框架Shiro概述及原理

1.1 Shiro是什么 Apache Shiro是一个功能强大且易于使用的Java安全&#xff08;权限&#xff09;框架。Shiro可以完成&#xff1a;认证、授权、加密、会话管理、与Web集成、缓存 等。借助Shiro您可以快速轻松地保护任何应用程序——从最小的移动应用程序到最大的Web和企业应用…...

编程日记 2023/8/26 4:01:50

java: 无法访问org.springframework.boot.SpringApplication 错误的类文件

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 错误1&#xff1a; java: 无法访问org.springframework.boot.SpringApplication 错误的类文件: /D:/Software/env-java/apache-maven-3.6.1/repository/org/springframework/boot/spring-boot/3.1.2/sp…...

编程日记 2023/8/26 4:00:49

改进YOLO系列：7.添加CA注意力机制

添加CA注意力机制 1. CA注意力机制论文２. CA注意力机制原理３. CA注意力机制的配置３.１common.py配置３.２yolo.py配置３.３yaml文件配置1. CA注意力机制论文 论文题目：Coordinate Attention for Efficient Mobile Network Design 论文链接：Coordinate Attention for Effi…...

编程日记 2023/8/26 3:59:47

20世纪十大经典算法解析与应用

二十世纪十大经典算法解析1. 蒙特卡洛方法 (1946)由John von Neumann、Stan Ulam和Nick Metropolis在洛斯阿拉莫斯国家实验室提出。该方法通过随机采样解决确定性数学问题&#xff0c;其核心思想是&#xff1a;在单位正方形内随机撒点统计落在不规则图形内的点数比例该比例近似…...

编程新知 2026/3/30 21:53:08

如何为Unity游戏添加自定义功能：BepInEx插件框架的全方位实战指南

如何为Unity游戏添加自定义功能&#xff1a;BepInEx插件框架的全方位实战指南 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx BepInEx是一款专为Unity Mono、IL2CPP和.NET框架游戏…...

编程新知 2026/3/30 21:10:56

熟悉C#如何转TypeScript——SDK与包引用的主要区别

SDK与包引用的主要区别 在 TypeScript 开发中&#xff0c;包引用&#xff08;import/require&#xff09;并不是 SDK 的集合&#xff0c;而是模块化代码库的引用方式。以下是详细解释&#xff1a;核心概念对比特性TypeScript/JavaScript (npm).NET Core SDK包管理工具npm / yar…...

编程新知 2026/3/30 20:38:40

避坑指南：STM32输入捕获测量PWM时，如何处理计数器溢出的3种方案

STM32输入捕获测量PWM时的计数器溢出处理方案实战解析 在嵌入式系统开发中&#xff0c;精确测量PWM信号的频率和占空比是常见需求。STM32系列微控制器的输入捕获功能为此提供了硬件支持&#xff0c;但当PWM周期较长或测量高分辨率信号时&#xff0c;定时器计数器(CNT)溢出问题往…...

编程新知 2026/3/30 20:26:29

告别手动配置：用STM32CubeMX和Arduino库玩转ADS1115与STM32 ADC

告别手动配置&#xff1a;用STM32CubeMX和Arduino库玩转ADS1115与STM32 ADC 在嵌入式开发的世界里&#xff0c;ADC&#xff08;模数转换器&#xff09;就像一位不知疲倦的翻译官&#xff0c;将模拟世界的连续信号转换为数字世界能理解的离散数值。然而&#xff0c;传统的寄存器…...

编程新知 2026/3/30 20:22:28

终极LoRaWAN服务器搭建指南：如何快速构建你的私有物联网网络

终极LoRaWAN服务器搭建指南&#xff1a;如何快速构建你的私有物联网网络 【免费下载链接】lorawan-server Compact server for private LoRaWAN networks 项目地址: https://gitcode.com/gh_mirrors/lo/lorawan-server 你是否想拥有一个完全可控的LoRaWAN物联网平台&…...

编程新知 2026/3/30 18:52:56

别再只盯着GPS了！手把手教你用Python仿真UWB定位，30厘米精度是怎么来的？

用Python仿真UWB定位&#xff1a;从纳秒脉冲到30厘米精度的全流程解析 在室内导航、工业自动化或仓储物流等领域&#xff0c;定位精度直接决定了系统性能的上限。传统GPS在开阔地带表现优异&#xff0c;但一旦进入室内环境&#xff0c;其信号衰减和多径效应会导致定位误差急剧…...

编程新知 2026/3/30 18:44:52

告别繁琐权限，uTools hosts插件一键切换与管理的效率革命

1. 为什么我们需要更优雅的hosts管理方案 每次修改hosts文件都要经历这样的痛苦循环&#xff1a;先要回忆文件藏在系统哪个角落&#xff0c;接着得用管理员身份打开文本编辑器&#xff0c;小心翼翼地修改内容&#xff0c;最后还要担心格式错误导致系统异常。作为经常需要切换开…...

编程新知 2026/3/30 17:46:11

QT多线程定时任务实战：QTimer与QThread的高效协作与主线程通信

1. QT多线程定时任务的核心挑战 在开发桌面应用程序时&#xff0c;经常会遇到需要定期执行某些任务的场景&#xff0c;比如每隔5秒采集一次传感器数据、每分钟检查一次系统状态等。这时候很多开发者会直接在主线程中使用QTimer&#xff0c;但这样做有个致命问题&#xff1a;如…...

编程新知 2026/3/30 17:38:09

从LTE到5G-Advanced：载波聚合(CA)技术演进全解析与网络工程师调试指南

从LTE到5G-Advanced&#xff1a;载波聚合技术深度演进与实战调试手册 当你在凌晨三点的基站机房盯着屏幕上跳动的KPI指标&#xff0c;突然发现某个5G小区下行速率始终无法突破800Mbps——这很可能是一个典型的载波聚合配置问题。作为网络优化工程师&#xff0c;我们每天都在与这…...

编程新知 2026/3/30 16:53:44