个人理解无界原理

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<style>

#acb{

color: green;

}

.aaa{

color: red;

}

</style>

<body>

<div id="acb">22</div>

<div id="shadown">

<!-- <wujie-app></wujie-app> -->

</div>

</body>

<script>

const host = document.querySelector("#shadown");

const shadow = host.attachShadow({ mode: "open" });

const aa = document.createElement("wujie-app")

shadow.appendChild(aa)

class MyCustomElement extends HTMLElement {

constructor() {

super();

//const s = document.getElementById("tem")

const ht = document.createElement("html")

const bo = document.createElement('body')

const div = document.createElement("div")

div.innerHTML = 111112222

div.id='acb'

bo.appendChild(div)

ht.appendChild(bo)

this.appendChild(ht)

// 在这里可以进行元素的初始化操作,比如添加内容、样式等

}

}

customElements.define('wujie-app', MyCustomElement);

</script>

</html>

相关推荐
无心水2 小时前
17、Java内存溢出(OOM)避坑指南:三个典型案例深度解析
java·开发语言·后端·python·架构·java.time·java时间处理
冰暮流星2 小时前
javascript之Dom查询操作1
java·前端·javascript
admin and root2 小时前
XSS之Flash弹窗钓鱼
前端·网络·安全·web安全·渗透测试·xss·src
广州灵眸科技有限公司2 小时前
瑞芯微(EASY EAI)RV1126B 人脸98关键点算法识别
开发语言·科技·嵌入式硬件·物联网·算法·php
Figo_Cheung2 小时前
赛博疯态(Cyber-Madness)研究报告——基于人机交互中的情感共鸣、递归指涉与拟人化投射现象分析
开发语言·php·人机交互
计算机安禾2 小时前
【数据结构与算法】第24篇:哈夫曼树与哈夫曼编码
c语言·开发语言·数据结构·c++·算法·visual studio
咚为2 小时前
深入浅出 Rust 内存顺序:从 CPU 重排到 Atomic Ordering
开发语言·后端·rust
susu10830189112 小时前
python代码把GIF 转成视频
开发语言·python
取码网2 小时前
2025最新口红机防篡改版本源码
android·java·javascript