frontengineerplugin
Version:
前端工程化脚手架.集成eslint,husky,prettier,eslint,npmrc,CICD,testCase,node_proxy,readme生成 9个主要功能
62 lines (52 loc) • 1.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="example.js"></script>
<style>
/* 直到影子dom的dom结构被添加之后才会出现，非常有用 */
:not(:defined){
display: block;
opacity: 0;
transition: all .3s ease;
}
</style>
</head>
<body>
你好
<!-- <my-div option="测试" >
<div slot="container" id="test" >
hello
</div>
<div slot="container" id="test" class="active">
tab1
</div>
<div slot="container" id="test" class="active">
tab2
</div>
<div slot="container" id="test" class="active">
tab3
</div>
</my-div> -->
<script>
let init = document.createElement("my-div")
//
setTimeout(()=>{
console.log(init.shadowRoot.querySelectorAll("div"))
},4000)
document.body.appendChild(init)
// document.body.remove(init)
// customElements.
customElements.whenDefined('my-div').then(() => {
console.log("开始define")
document.querySelector("my-div").setAttribute("option","你好")
});
// setTimeout(() => {
// console.log(document.querySelector("my-div").shadowRoot.querySelector(`slot[name="container"]`).assignedElements({ flatten: true }))
// }, 3000);
</script>
</body>
</html>