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

Web Components

news 2026/2/8 15:44:38

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

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/2/8 10:56:57

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2026/1/30 15:16:30

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2026/1/24 19:22:03

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2026/1/25 10:13:29

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2026/1/26 13:25:02

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

编程新知 2025/10/6 15:50:41