web_component

发表于 更新于 分类于

一个webcomponent

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 <!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>webcomponent</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.14/webcomponents-hi.js"></script>
    <link rel="import" href="orderList.html" />
</head>

<body>
    <order-list v-for="arr">
        <div slot="render">#item</div>
    </order-list>
</body>
<script type="text/javascript" src="./store.js"></script>
<script type="text/javascript">
    var store = new Store(function data() {
        return {
            arr: [1, 2, 3, 4, 5]
        }
    })
    window.store = store;

</script>

</html>

Store.js

1
2
3
4
5
6
 class Store {
    constructor(data) {
        window.data = data()
    }
}
window.Store = Store;

orderList.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 <template id="orderList">
    <slot name="render" id="render"></slot>
</template>
<script type="text/javascript">
    class orderList extends HTMLElement {
        constructor() {
            super()
            // 查找模板内容
            const content = document.querySelector('#orderList').content;
            // 创建Shadow DOM
            const shadowDOM = this.attachShadow({ mode: 'open' });
            // 将模板添加到Shadow DOM上
            shadowDOM.appendChild(content.cloneNode(true));
            var r = this.getAttribute("v-for");
            this.renderItem(data[r])
        }
        renderItem(data) {
            var subItem = document.querySelector('div[slot="render"]');
            var template = document.querySelector("#orderList")
            var strTemplate = ``;
            for (var i in data) {
                var html = subItem.innerHTML;
                console.log("div", subItem.nodeName)
                var nodeName = subItem.nodeName.toLocaleLowerCase();
                var that = this;
                html.replace(/#item/g, function (a) {
                    console.log("a",a)
                    var dom = document.createElement(nodeName);
                    dom.innerHTML = data[i];
                    subItem.appendChild(dom.cloneNode(true))
                })
            }
        }
        //首次插入DOM文档时调用
        connectedCallback() {
            //在这里发送数据请求（Ajax）
        }
        //被从文档DOM中删除时调用
        disconnectedCallback() {
            console.log("n")
        }
        //被移动到新的文档时调用
        adoptedCallback() {
            console.log("c")
        }
        //当增加、删除、修改自身的属性时被调用
        attributeChangedCallback() {
            console.log("d")
        }
    }
    window.customElements.define('order-list', orderList);
</script>