shadow dom 与 自定义 Element
draft 改的太快， registerElement 已经过时 改 customElements.define；
<!DOCTYPE html>
<!--
此页面演示了如何使用class 如何使用 shadow dom
-->
<html>
<head>
<title>台灯</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>
</script>
<script type="text/javascript">
class RegieHTMLElement extends HTMLUnknownElement {
constructor() {
super();
}
//创建元素实例
createdCallback() {
console.log("RegieHTMLElement is create");
}
//向文档插入实例
attachedCallback() {
console.log("RegieHTMLElement is append");
}
//从文档中移除实例
detachedCallback() {
console.log("RegieHTMLElement is removed");
}
//修改属性
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="这是一个按钮">asdfasdf</r-btn>
<div></div>
<button>按钮</button>
</body>
</html>
<script type="text/javascript">
class RegieHTMLElement extends HTMLElement {
constructor() {
super();
}
//创建元素实例
createdCallback() {
console.log("RegieHTMLElement is create");
}
//向文档插入实例
attachedCallback() {
console.log("RegieHTMLElement is append");
}
//从文档中移除实例
detachedCallback() {
console.log("RegieHTMLElement is removed");
}
//修改属性
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>
<script type="text/javascript">// <![CDATA[ class RegieHTMLElement extends HTMLElement { constructor() { super(); } //创建元素实例 createdCallback() { console.log("RegieHTMLElement is create"); } //向文档插入实例 attachedCallback() { console.log("RegieHTMLElement is append"); } //从文档中移除实例 detachedCallback() { console.log("RegieHTMLElement is removed"); } //修改属性 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>
相关推荐
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children