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