持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
Custom Element生命周期函数
- connectCallback: 当一个元素被插入到文档时进行调用，当一个元素被反复添加到文档时，这个方法会被多次调用。
<!DOCTYPE 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>connectCallback</title>
</head>
<script>
class Test extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
console.log('Custom Element加入文档');
}
}
customElements.define('custom-test', Test);
</script>
<body>
</body>
<script>
setTimeout(() => {
const custom = document.createElement("custom-test")
document.body.appendChild(custom)
},1000)
</script>
</html>
- disconnectedCallback: 当一个元素被从文档中移除时调用，如果一个元素被反复移除，这个方法也会被多次调用。
<!DOCTYPE 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>disconnectCallback</title>
</head>
<script>
class Test extends HTMLElement {
constructor() {
super();
}
disconnectedCallback() {
console.log('Custom Element移出文档');
}
}
customElements.define('custom-test', Test);
</script>
<body>
<custom-test></custom-test>
</body>
<script>
setTimeout(() => {
const custom = document.getElementsByTagName("custom-test")[0]
custom.remove()
},1000)
</script>
</html>
- attributeChangedCallback： 当observedAttributes返回的监控数组内的属性值变化时，该方法会被调用。
- observedAttributes： 该方法会返回一个数组，数组内的属性变化会被监视
<!DOCTYPE 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>attributeChangedCallback</title>
</head>
<script>
class Test extends HTMLElement {
constructor() {
super();
}
//被监视的属性才可以触发attributeChangedCallback
static get observedAttributes() {
//需要监视的属性
return ['test'];
}
attributeChangedCallback(AttributeName ,lastValue , currentValue) {
//AttributeName: 改变的属性名
//lastValue: 上次的该属性的值，如为新建属性则为null
//currentValue: 当前更新属性值
console.log("属性被改变了")
}
}
customElements.define('custom-test', Test);
</script>
<body>
<custom-test></custom-test>
</body>
<script>
setTimeout(() => {
const custom = document.getElementsByTagName("custom-test")[0]
custom.setAttribute("test","aaa")
},1000)
setTimeout(() => {
const custom = document.getElementsByTagName("custom-test")[0]
custom.setAttribute("test","bbb")
},2000)
</script>
</html>
- adoptedCallback： 当元素被转移到其他文档时，该元素会被调用，如document.adoptNode（该方法可以将其他文档节点的ownerDocument转为当前文档，并在其他文档上移除该节点）将元素转移到iframe，或者是选择器选中该元素，直接插入其他文档，如iframe。
//iframe.html
<!DOCTYPE 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></title>
</head>
<script>
class Test extends HTMLElement {
constructor() {
super();
}
adoptedCallback(lastDocument,currentDocument) {
//lastDomcument: 元素所在的上一个文档
//currentDocument： 元素所在的当前文档
console.log("元素被转移了文档")
}
}
customElements.define('custom-test', Test);
</script>
<body>
<custom-test>Custom Element</custom-test>
</body>
</html>
//index.html
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
<button id="move">移动元素</button>
</body>
<script>
// 该函数用来从本文档的第一个iframe中获取第一个element元素，
// 并插入到当前文档树中
function getEle(){
var iframe = document.getElementsByTagName("iframe")[0],
ele = iframe.contentWindow.document.body.firstElementChild
if(ele){
document.body.appendChild(document.adoptNode(ele))
}else{
alert("没有更多元素了")
}
}
document.getElementById("move").onclick = getEle
</script>
</html>
