原生标签WebComponent

文章目录

  • 介绍
  • 一、web Component
  • 二、怎么使用
  • 三、在Vue中使用
  • 使用场景


前端必备工具推荐网站(免费图床、API和ChatAI等实用工具):
http://luckycola.com.cn/


介绍

`
平常浏览各个网站过程中,经常遇到的一种现象:页面广告。
这种广告按照来源可分为两种:

  • 1、站点自己的广告
  • 2、第三方投放的广告

第二种需要在对代理流量的目标站点里,插入开发者想要的元素,并且与此同时要保证插入的代码与原站点之间的影响降至最低。
因此,需要一种有效的**“隔离”**手段。

主流的方案有两种:

  1. iframe方案: frame需要一个明确的src资源链接,而有时候我们似乎没必要再单独为其去发布一个资源;iframe并未实现完全的“隔离”,原有站点还是能拿到iframe节点,并可对其进行DOM操作;
  2. web component方案:Web Components 提供了基于原生支持的、对视图层的封装能力,可以让单个组件相关的 javaScript、css、html模板运行在以html标签为界限的局部环境中,不会影响到全局,组件间也不会相互影响 。 再简单来说:就是提供了我们自定义标签的能力,并且提供了标签内完整的生命周期

一、web Component

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。

  • Shadow host:一个常规 DOM 节点,Shadow DOM 会被附加到这个节点上。
  • Shadow tree:Shadow DOM 内部的 DOM 树。
  • Shadow boundary:Shadow DOM 结束的地方,也是常规 DOM 开始的地方。
  • Shadow root: Shadow tree 的根节点。

在这里插入图片描述

二、怎么使用

1、代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Web Components</title>
</head>
<body><custom-btn></custom-btn><script>class MyBtn extends HTMLElement {constructor() {// 继承父super();// 标签模式let p = this.h('p');p.innerHTML = '我只自定义p内容啊';p.setAttribute('style', 'height:200px;width:200px;border:1px solid #ccc;background:yellow');// template模式const template = this.h('template')template.innerHTML = `<div>测试</div><style>div{height:200px;width:200px;background:blue;}</style>`// 创建shadowDom// mode 属性,值可以是 open 或者 closed,// open 表示可以通过页面内的 JavaScript 方法来获取 Shadow DOM,例如使用 Element.shadowRoot 属性:// 如果你将一个 Shadow root 附加到一个 Custom element 上,并且将 mode 设置为 closed,那么就不可以从外部获取 Shadow DOM 了——myCustomElem.shadowRoot 将会返回 null。浏览器中的某些内置元素就是如此,例如<video>,包含了不可访问的 Shadow DOM。let showDow = this.attachShadow({mode: 'open'});console.log('showDow:', showDow);// 插入标签showDow.appendChild(p);// 插入模版showDow.appendChild(template.content.cloneNode(true));};h(tag) {return document.createElement(tag);}/*** 生命周期*///当自定义元素第一次被连接到文档 DOM 时被调用。connectedCallback () {console.log('我已经插入了!!!')}//当自定义元素与文档 DOM 断开连接时被调用。disconnectedCallback () {console.log('我已经断开了!!!')}//当自定义元素被移动到新文档时被调用adoptedCallback () {console.log('我被移动了!!!')}//当自定义元素的一个属性被增加、移除或更改时被调用attributeChangedCallback () {console.log('我被改变了!!!')}}window.customElements.define('custom-btn', MyBtn)</script>
</body>
</html>

2、效果展示:
在这里插入图片描述

三、在Vue中使用

1、第一步:defineCustomElement

代码如下(示例):

/*vite config ts 配置*/
vue({template:{compilerOptions:{isCustomElement:(tag)=> tag.includes('xiaoman-')}}

2、第二步:父组件 中使用

<template><div><custom-btn :title=" JSON.stringify(name) "></xiaoman-btn></div>
</template><script setup lang='ts'>
import { ref, reactive, defineCustomElement } from 'vue'
//自定义元素模式  要开启这个模式,只需要将你的组件文件以 .ce.vue 结尾即可
import customVueVue from './components/custom-vue.ce.vue'
const Btn = defineCustomElement(customVueVue)
customElements.define('custom-btn', Btn)const name = ref({a:1})</script><style scoped lang='less'></style>

3、第二步:子组件 中使用

<template><div>test123213 {{title}}</div>
</template><script setup lang='ts'>import { ref, reactive } from 'vue'defineProps<{title:string
}>()</script><style scoped lang='less'></style>

使用场景

插入广告场景、微前端之无界等

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

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

相关文章

蜜罐技术是一种什么防御技术?实现原理是什么?

前言&#xff1a;蜜罐技术的出现改变了这种被动态势&#xff0c;它通过吸引、诱骗攻击者&#xff0c;研究学习攻击者的攻击目的和攻击手段&#xff0c;从而延缓乃至阻止攻击破坏行为的发生&#xff0c;有效保护真实服务资源。 自网络诞生以来&#xff0c;攻击威胁事件层出不穷…

簡述Vue 2.0 响应式数据的原理

Vue 2.0 响应式数据的原理主要基于以下几个关键点&#xff1a; 数据劫持与Object.defineProperty&#xff1a; Vue 2.0 使用 Object.defineProperty 方法来劫持对象的属性&#xff0c;为其添加 getter 和 setter 方法。当数据被访问或修改时&#xff0c;这些 getter 和 setter …

类和对象【六】友元和内部类

文章目录 友元友元的作用友元的缺点友元函数语法&#xff1a;特点&#xff1a; 友元类语法&#xff1a;特点&#xff1a; 内部类概念特点 友元 友元的作用 友元提供了一种打破封装的方式&#xff0c;有时提供了便利。 友元的主要作用就是打破封装 即可以让一个类的友元函数…

爬虫100个Python例子优化

今天看到一个Python 100例的在线资源,感觉每个都需要去点,太费时间了,于是,使用Python将数据爬取下来,方便查看。实际效果如下: 。。。。。。 用了13分钟,当然,这是优化后的效果,如果没有优化,需要的时间更长。 爬取url如下: https://www.runoob.com/python/pytho…

Vue小程序项目知识积累(三)

1.CSS中的var( ) var() 函数用于插入自定义属性&#xff08;也称为CSS变量&#xff09;的值。 var(--main-bg-color,20rpx) 设置一个CSS变量的值&#xff0c;但是如果 --main-bg-color 变量不存在&#xff0c;它将默认返回 20rpx。 CSS变量必须在一个有效的CSS规则&#xf…

uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型

使用vue3tsviteuniapp开发小程序或者跨平台app的趋势越来越高&#xff0c;有一个顺手的UI的框架还是非常重要的&#xff0c;官方维护的 uni-ui&#xff0c;支持全端&#xff0c;而且有类型提示&#xff0c;目前已经内置到 GitHub - Sjj1024/uniapp-vue3: 使用uniapp和vue3 ts …

搭建CMS系统

搭建CMS系统 1 介绍 内容管理系统&#xff08;Content Management System&#xff0c;CMS&#xff09;是一种用于管理、发布和修改网站内容的系统。开源的CMS系统有WordPress、帝国CMS等&#xff0c;国产的Halo很不错。 WordPress参考地址 # 官网 https://wordpress.org/# …

为什么IP地址需要划分为公有和私有地址?

一.知识点的解释 1.在现在的网络中&#xff0c;IP地址分为公网IP地址和私有IP地址。公网IP是在Internet使用的IP地址&#xff0c;而私有IP地址则是在局域网中使用的IP地址。 2.私有IP地址是一段保留的IP地址。只使用在局域网中&#xff0c;无法在Internet上使用。 二.为什么…

Python脚本必加代码:99%的程序员都忽视了这个细节!

文章目录 一、初识 if __name__ __main__二、__name__ 和 __main__ 是什么&#xff1f;三、实战讲解四、实际应用场景测试代码提高代码可重用性避免不必要的执行 五、深入理解和更多用法使用 argparse 解析命令行参数使用 unittest 进行单元测试使用 multiprocessing 创建子进…

c#入门学习笔记

p35 字符串 在字符串之前加上一个&#xff0c;可以保持原生字符&#xff0c;不用再进行转义&#xff08;除了双引号&#xff09;。 例如&#xff1a; "A short list: item 1 item 2"或者&#xff1a; "C:\Temp\MyDir\MyFile.doc"这相当于"C:\\Tem…

网盘攻略,羊毛薅到底,这4招太狠了

仅供参考 先买原石会员账户&#xff0c;再绑手机。 自己手机千万不要去注册115&#xff0c;先去马云家买原石会员帐户(五十多自带33T永久空间&#xff0c;非常实惠)。买完原石帐户后再用手机登录绑定帐户和修改密码。买8T永久空间8年VIP 然后再花560元买8T永久空间8年vip&…

嵌入式全栈开发学习笔记---C语言笔试复习大全22

目录 结构体 结构体的声明 定义结构体变量 访问结构体成员进行初始化 通过结构体变量名访问结构体成员 结构体指针 结构体指针的定义 通过结构体指针访问结构体成员 结构体数组 结构体数组的定义 遍历结构体数组 结构体的长度&#xff08;笔试重点&#xff09; 上一…

深入理解C++多态-虚函数

引言 C多态的实现方式可以分为静态多态和动态多态&#xff0c;其中静态多态主要有函数重装和模板两种方式&#xff0c;动态多态就是虚函数。下面我们将通过解答以下几个问题的方式来深入理解虚函数的原理&#xff1a; 为什么要引入虚函数&#xff1f;&#xff08;用来解决什么…

2024年最新信息安全标准汇总

这些标准是我们在数字化时代保障网络安全、数据安全的重要基石&#xff0c;对于维护国家安全、企业利益和个人信息安全具有至关重要的作用。 随着科技的快速发展&#xff0c;网络空间的安全威胁也在不断演变&#xff0c;从复杂的网络攻击到个人信息泄露&#xff0c;这些安全风…

JAVA面试题大全(十四)

1、Kafka 可以脱离 Zookeeper 单独使用吗&#xff1f;为什么&#xff1f; kafka不能脱离zookper单独使用&#xff0c;因为kafka使用zookper管理和协调kafka的节点服务器。 2、Kafka 有几种数据保留的策略&#xff1f; Kafka提供了多种数据保留策略&#xff0c;这些策略用于定…

哈希双指针

文章目录 一、哈希1.1两数之和1.2字母异位词分组1.3最长子序列 二、双指针2.1[移动零](https://leetcode.cn/problems/move-zeroes/description/?envTypestudy-plan-v2&envIdtop-100-liked)2.2[盛最多水的容器](https://leetcode.cn/problems/container-with-most-water/d…

嵌入式0基础开始学习 ⅠC语言(7)指针

0.问题引入 int a 5; a 1024; //把1024存放到变量a的地址中去 b a; // 取变量a的值&#xff0c;赋值给b >在c语言中&#xff0c;任何一个变量&#xff0c;都有两层含义 (1)代表变量的存储单元的地址&#xff1a;变量的地址…

蓝桥楼赛第30期-Python-第三天赛题 统计学习数据题解

楼赛 第30期 Python 模块大比拼 统计学习数据 介绍 JSON&#xff08;JavaScript Object Notation, /ˈdʒeɪsən/&#xff09;是一种轻量级的数据交换格式&#xff0c;最初是作为 JavaScript 的子集被发明的&#xff0c;但目前已独立于编程语言之外&#xff0c;成为了通用的…

分享10个国内可以使用的GPT中文网站

在今天的人工智能领域&#xff0c;基于对话的语言模型已成为研究的热点&#xff0c;尤其是像 ChatGPT 这样因其出色的语言理解与对话交互能力而广受关注的模型。本文将介绍10个国内可以直接使用GPT的网站&#xff0c;旨在为大家在选择和使用这些优秀的AI工具时提供有价值的参考…

使用pyqt绘制一个爱心!

使用pyqt绘制一个爱心&#xff01; 介绍效果代码 介绍 使用pyqt绘制一个爱心&#xff01; 效果 代码 import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget from PyQt5.QtGui import QPainter, QPen, QBrush, QColor from PyQt5.QtCore import Qt, Q…