个人理解无界原理

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

相关推荐
caimouse21 分钟前
ReactOS 图形系统分析(17):区域填充 — EngPaint / IntEngPaint(paint.c)
c语言·开发语言·算法
北风toto28 分钟前
研发效能与后端核心技术全景指南:从CI/CD到共性组件实战
java·开发语言·ci/cd
Billy1213830 分钟前
Day12-C++20 Coroutines(上):协程原理与Promise/Awaitable机制
开发语言·c++进阶学习
01二进制代码漫游日记31 分钟前
C++基础入门速通
java·开发语言·c++
Herbert_hwt33 分钟前
第六章 Java深入理解接口、函数式接口与lambda表达式
java·开发语言·算法
岁岁种桃花儿34 分钟前
Vue核心语法第十一篇:绑定样式
前端·javascript·vue.js
橙橙笔记1 小时前
C++的学习第三部分
开发语言·c++·学习
程序员黑豆8 小时前
Java类型推断完全指南:从var到菱形运算符,掌握使用限制与最佳实践
java·前端·ai编程
To_OC9 小时前
踩了个 TS 的坑之后,我终于把 type 和 interface 掰明白了
前端·react.js·typescript