<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<my-element index=1 titles='["a","b","c"]' contents='["aaaaa","bbbb","cccc"]'>
<span>这是原有内容</span>
<ul slot="f">
<li>fdfsd</li>
<li>re8re</li>
<li>uuu0r</li>
</ul>
</my-element>
<iframe src="" frameborder=1 id="myFrame"></iframe>
<script>
class MyElement extends HTMLElement {
//监听属性a,b
static get observedAttributes(){
return ['a','b']
}
constructor(){
super();
const shadom =this.attachShadow({
mode:"open"
});
// const span=document.createElement("span");
// span.innerHTML="Hello MiaoV";
// shadom.appendChild(span);
let n=this.getAttribute("index") || 0;
let titles=JSON.parse(this.getAttribute("titles")) || ["标题一","标题二","标题三"];
let contents=JSON.parse(this.getAttribute("contents")) || ["内容一","内容二","内容三"];
//创立button标签
for(let i=0;i<3;i++){
let button=document.createElement("button");
button.innerHTML=titles[i];
if(i==n){
button.classList.add("active");
}
button.onclick=function(){
//内部元素从shadom取元素
var buttons=shadom.querySelectorAll("button");
var ps=shadom.querySelectorAll("p");
for(let a=0; a<3; a++){
buttons[a].classList.remove("active");
ps[a].classList.remove("active");
}
this.classList.add("active");
ps[i].classList.add("active");
}
shadom.appendChild(button);
}
//创立p标签
for(let i=0;i<3;i++){
let p=document.createElement("p");
p.innerHTML=contents[i];
if(i==n){
p.classList.add("active");
}
shadom.appendChild(p);
}
//创立style标签
const style=document.createElement("style");
style.textContent=`
button.active{
background:yellow;
}
p{
display:none;
}
p.active{
display:block;
}
`;
shadom.appendChild(style);
//创立插槽
const div=document.createElement("div");
div.innerHTML="<slot></slot>";
shadom.appendChild(div);
//创立footer
const footer=document.createElement("footer");
footer.innerHTML="<slot name='f'></slot>"; //具名插槽
shadom.appendChild(footer);
}
//当自定义元素被添加时
connectedCallback(){
console.log("connectedCallback");
}
//当自定义元素与文档断开连接时
disconnectedCallback(){
console.log("disconnectedCallback");
}
//当自定义元素移动到新的窗口时
adoptedCallback(){
console.log("adoptedCallback");
}
//myFrame.contentWindow.document.body.appendChild(myElement);
attributeChangedCallback(a,b,c){
console.log("attributeChangedCallback",a,b,c);
}
}
customElements.define("my-element",MyElement);
// const myFrame=document.querySelector("#myFrame");
// const myElement=document.querySelector("my-element");
// myFrame.contentWindow.document.body.appendChild(myElement);
</script>
</body>
</html>自定义组件开发
于 2018-09-22 15:43:21 首次发布
9156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
