The draft is changed too fast, registerElement is outdated and changed to customElements.define;
<!DOCTYPE html>
<!--
This page demonstrates how to use class how to use shadow dom
-->
<html>
<head>
<title>Table lamp</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script id="bizfty-button-template" type="text/template">
<style>
button{
font-size: 36px;
}
</style>
<button>
button
</button>
</script>
<script type="text/javascript">
class RegieHTMLElement extends HTMLUnknownElement {
constructor() {
super();
}
//create element instance
createdCallback() {
console.log("RegieHTMLElement is create");
}
//insert instance into document
attachedCallback() {
console.log("RegieHTMLElement is append");
}
// remove the instance from the document
detachedCallback() {
console.log("RegieHTMLElement is removed");
}
//modify properties
attributeChangedCallback(attrName, oldVal, newVal) {
console.log("RegieHTMLElement prop name:" + attrName + "is changed,the old value is" + oldVal + ",the new value is" + newVal);
}
}
class RegieButton extends RegieHTMLElement {
constructor() {
super();
}
set icon(icon) {
}
get icon() {
}
set title(title) {
alert(title);
}
get title() {
}
createdCallback() {
super.createdCallback();
var shadow = this.createShadowRoot();
shadow.innerHTML = document.querySelector('#bizfty-button-template').innerText;
}
}
document.registerElement ("r-btn", RegieButton);
</script>
<style>
button{
background-color:tomato;
font-size: 18px;
}
r-btn{
font-size: 20px;
}
</style>
</head>
<body class="bizfty">
<r-btn icon="" title="This is a button">asdfasdf</r-btn>
<div></div>
<button>按钮</button>
</body>
</html>
<script type="text/javascript">
class RegieHTMLElement extends HTMLElement {
constructor() {
super();
}
//Create an instance of the element
createdCallback() {
console.log("RegieHTMLElement is create");
}
//Insert into the document instance
attachedCallback() {
console.log("RegieHTMLElement is append");
}
//remove instance from document
detachedCallback() {
console.log("RegieHTMLElement is removed");
}
//Modify property
attributeChangedCallback(attrName, oldVal, newVal) {
console.log("RegieHTMLElement prop name:" + attrName + "is changed,the old value is" + oldVal + ",the new value is" + newVal);
}
}
class RegieButton extends RegieHTMLElement {
constructor() {
super();
}
createdCallback() {
super.createdCallback();
var shadow = this.createShadowRoot();
shadow.innerHTML = document.querySelector('#bizfty-button-template').innerText;
}
}
customElements.define ('r-btn', RegieButton);
// 过时 过时
//document.registerElement("r-btn ", RegieButton);
</script>
innerText; }} customElements.define ('r-btn', RegieButton); // 过时 过时 //document.registerElement("r-btn ", RegieButton); //]]> </script>