个人理解无界原理

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

相关推荐
非优秀程序员6 分钟前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端
非优秀程序员7 分钟前
第03章 三大门户,烽烟起于瀛海威|《互联网产品恩仇录》
前端
沐晓时光1 小时前
C语言入门,内存函数知识讲解
c语言·开发语言
程序员大阳4 小时前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
曦樂~4 小时前
【Web Development】02 CSS
前端·css
风骏时光牛马4 小时前
后端服务接口开发与数据逻辑处理
前端
东鹏特饮4 小时前
经典打砖块(Breakout)游戏
前端·css·css3
IT_陈寒5 小时前
Vite的HMR把我整不会了:一个生产环境的热更新坑
前端·人工智能·后端
Mh5 小时前
如何使用双缓冲优化视频切换
前端
risenav5 小时前
低头蓄力,抬头起跳:《萤虫跳跳》的 Rokid AIUI 开发实战
前端