Web Components

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>

 

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

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

相关文章

Java基础十八(正则表达式 + 日期时间)

1. 正则表达式 1.1 普通字符 字符描述示例[abc]匹配 […] 中所有字符[hlo] 匹配字符串 "hello world" 中所有的 h l o 字母[^ABC]匹配除了 […] 中所有字符[hlo] 匹配字符串 "hello world" 中除了 h l o 的所有字母[^a-z]匹配除了 […] 中所有字符[hlo] 匹…

Sinkhorn算法

Sinkhorn算法 介绍示例代码 介绍 Sinkhorn算法是一种用于解决最优传输问题的迭代算法。最优传输问题是指在给定两个概率分布 μ \mu μ和 ν \nu ν的情况下&#xff0c;找到一个最优的转移方案&#xff0c;使得从 μ \mu μ到 ν \nu ν的转移成本最小。Sinkhorn算法通过迭代…

C语言static关键字

目录 概述1. 局部变量1.1 普通局部变量1.2 静态局部变量 2.全局变量2.1 普通全局变量2.2 静态全局变量 3.函数4.静态块总结 概述 本文简单介绍一下static关键字在c语言中的应用。 1. 局部变量 1.1 普通局部变量 普通局部变量是在函数内部或代码块内部定义的变量。这些变量只…

Docker file解析

文章目录 简介构建的三步骤Docker执行Dockerfile的大致流程DockerFile常用保留字指令创建第一个Dockerfile镜像的缓存特性 Docker file 解析 简介 Dockerfile是用来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本&#xff0c;记录了镜像构…

单片机IO模拟串口协议

一、前言 嵌入式硬件平台调试中常用的debug方法是看串口打印定位问题&#xff0c;但有时候会遇到单片机没有串口外设或者串口引脚被占用的情况&#xff0c;这时候也可以在代码里操作空闲的IO输出不同个数的脉冲来达到调试的效果&#xff0c;但是要用逻辑分析仪抓线逐个看波形比…

在渗透测试中,探测到6379端口,你打算怎么利用

在渗透测试中&#xff0c;探测到6379端口&#xff0c;你打算怎么利用&#xff1f; 6379端口是Redis数据库的默认端口号。Redis是一种基于键值对的内存数据库&#xff0c;具有高性能和灵活的数据存储和检索功能。6379端口是Redis数据库的默认通信端口&#xff0c;用于连接到Red…

Redis数据结构:Set类型全面解析

Set 类型是一个无序并唯一的键值集合&#xff0c;它的存储顺序不会按照插入的先后顺序进行存储。Redis 中集合是通过哈希表实现的&#xff0c;所以添加&#xff0c;删除&#xff0c;查找的复杂度都是 O(1)。相对于列表&#xff0c;集合也有两个特点&#xff1a;无序、不可重复 …

从零开始学习 Java:简单易懂的入门指南之包装类(十九)

包装类 包装类5.1 概述5.2 Integer类5.3 装箱与拆箱5.4 自动装箱与自动拆箱5.5 基本类型与字符串之间的转换基本类型转换为StringString转换成基本类型 5.6 底层原理 算法小题练习一&#xff1a;练习二&#xff1a;练习三&#xff1a;练习四&#xff1a;练习五&#xff1a; 包装…

Java代码优化案例2:使用HashMap代替List进行数据查找

在开发过程中&#xff0c;我们经常需要在一个集合中查找某个元素。一种常见的做法是使用List来存储数据&#xff0c;然后通过循环遍历List来查找目标元素。然而&#xff0c;当数据量较大时&#xff0c;这种做法效率较低。我们可以通过使用HashMap来优这个过程。 1. 原始代码实…

vue3 单一状态管理

目录 1&#xff0c;问题2&#xff0c;单一状态管理 1&#xff0c;问题 有一个全局错误弹窗&#xff0c;当项目中有接口报错时&#xff0c;会显示错误信息。 思路&#xff1a;在 axios 的响应拦截器中&#xff0c;满足条件后打开错误弹窗。 问题&#xff1a;如何在 js 文件&a…

数据库——redis介绍

文章目录 redis是什么&#xff1f;分布式缓存常见的技术选型方案有哪些&#xff1f;说一下 Redis 和 Memcached 的区别和共同点&#xff1f; redis是什么&#xff1f; 简单来说 Redis 就是一个使用 C 语言开发的数据库&#xff0c;不过与传统数据库不同的是 Redis 的数据是存在…

浅析三维模型OBJ格式轻量化压缩文件大小的技术方法

浅析三维模型OBJ格式轻量化压缩文件大小的技术方法 在减小三维模型OBJ格式轻量化文件大小方面&#xff0c;有许多技术和方法可以使用。下面我将介绍一些常用的方法来减小OBJ文件的大小。 1、优化顶点数量&#xff1a;减少OBJ文件中的顶点数量是减小文件大小的一种有效方法。可…

同一个服务器发布两个前端(网站)

一开始怎么设置都是505&#xff0c;后来把网站文件的位置换到原已经发布成功的网站位置&#xff0c;就成功了。考虑应该是权限问题 server {listen 80;server_name localhost;# https配置参考 start#listen 443 ssl;# 证书直接存放 /docker/nginx/cert/ 目录下即…

【Springboot】| 从深入自动配置原理到实现 自定义Springboot starter

目录 一. &#x1f981; 前言二. &#x1f981; Spring-boot starter 原理实现分析2.1 自动配置原理 三. &#x1f981; 操作实践3.1 项目场景3.2 搭建项目3.3 添加相关依赖3.4 删除一些不需要的东西3.5 发邮件工具类逻辑编写3.6 创建相关配置类3.7 创建 Spring.factories 文件…

保障Web安全:构建可靠的网络防御体系

在当今数字化时代&#xff0c;Web安全已成为互联网世界中至关重要的议题。随着网络攻击手段的不断演进和网络犯罪的增加&#xff0c;保护用户数据和确保系统安全性已成为任何Web应用程序的首要任务。本文将深入探讨Web安全的重要性以及构建可靠的网络防御体系的关键要素。我们将…

LLMs之dataset:大语言模型LLMs相关开源数据集的简介、下载、使用方法之详细攻略

LLMs之dataset:大语言模型LLMs相关开源数据集的简介、下载、使用方法之详细攻略 目录 LLMs相关开源数据集的简介 1、SFT→RM+PPO三阶段关系梳理、数据集格式对比

Dart PowerTCP Emulation for .NET Crack

Dart PowerTCP Emulation for .NET Crack .NET CF上的PowerTCP Emulation为手持设备提供了高级的Internet通信组件。这些功能允许同步操作&#xff0c;这样可以消耗更少的资源&#xff0c;提供更大的灵活性&#xff0c;并生成易于维护的软件。带有.NET的PowerTCP仿真包括VT52、…

服务器Linux系统配置mysql数据库主从自动备份

服务器Linux系统配置mysql数据库主从自动备份 当数据内容越来越多的时候&#xff0c;数据库也变得越来越大了。如果不小心误删了&#xff0c;或者被黑主机了&#xff0c;那就什么都没有了。所以数据库的数据怎么能让它不丢失做到万无一失变得尤为重要&#xff01; 我是艾西&a…

《机器学习核心技术》分类算法 - 决策树

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;小白零基础《Python入门到精通》 决策树 1、决策树API2、决策时实际应用2.1、获取数据集2.2、划分数据集2.3、决策…

微服务(rpc)

微服务&#xff08;rpc&#xff09; 微服务必备的模块生产者消费者管理平台流量控制集群情况下如何做到流量监控 负载均衡服务发现和治理序列化传输序列化和反序列化 微服务是一种架构风格&#xff0c;将一个应用程序拆分为一组小型、独立的服务&#xff0c;每个服务都可以独立…