个人理解无界原理

<!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>

相关推荐
小短腿的代码世界3 分钟前
Qt状态机框架深度解析:从状态图到事件驱动闭环
开发语言·qt
顾随4 分钟前
(2)达梦数据库--SQl基础实践
前端·数据库·sql
键盘飞行员5 分钟前
Windsurf + Claude 4.7 前端开发:用 ui-ux-pro-max 根治 “AI 味”、实现全站 UI 统一
前端·ui·ai编程
IT_陈寒6 分钟前
被JavaScript的隐式类型转换坑到怀疑人生,记录这次离谱经历
前端·人工智能·后端
梦无矶6 分钟前
快速设置npm默认源为国内全局镜像源
前端·npm·node.js
广州灵眸科技有限公司10 分钟前
瑞芯微(EASY EAI)RV1126B 模型部署API说明
linux·开发语言·网络·人工智能·深度学习·算法·yolo
计算机安禾12 分钟前
【c++面向对象编程】第20篇:override与final关键字:现代C++对继承的控制
开发语言·c++
AI科技星14 分钟前
全域数学:从理论到现实的终极落地全记录 光速不变公理(v=c)+ 可见派维度常数公理(D_v=3)统一广义相对论与量子力学,解决物理学百年难题
c语言·开发语言
ch.ju15 分钟前
Java程序设计(第3版)第三章——数组的定义方式
java·开发语言
郝学胜-神的一滴15 分钟前
Qt 高级开发 004: 三大窗口类深度解析
开发语言·c++·qt·程序人生·系统架构