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>