一个webcomponent
index.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>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
class Store {
constructor(data) {
window.data = data()
}
}
window.Store = Store;
orderList.html
<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>
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 ggchzzz@163.com
