我在示例应用中尝试使用webcomponents。由于某些浏览器中不包含某些规格，我尝试使用polyfill。在Mozilla firefox中，我尝试启用密钥dom.webcomponents.enabled并添加一些polyfill（不在浏览器中）。我使用了webcomponents.js polyfill中的HTML Import polyfill。
仍然HTMLImport在Firefox，Internet Explorer（甚至使用polyfill）中无效。 （https://github.com/webcomponents/webcomponentsjs）
我也尝试过customElements v1 polyfill，而不是在Internet Explorer和firefox中工作。 （https://github.com/webcomponents/custom-elements）
是否有人成功将HTMLimports polyfill与customElements V1 polyfill包括在一起？
答案 0 :(得分：2)
在Firefox中使用包含HTML导入的自定义元素v1：
Vue.component('ajaxbtns',{
template:
`
<div class="tabs">
<ul>
<slot></slot>
</ul>
</div>
`,
data : function () {
return {
allAjaxBtn : []
};
},
created: function () {
this.allAjaxBtn = this.$children;
}
});
Vue.component('ajaxbtn',{
template:
`
<li :class="{ 'is-active' : btnActive }">
<a @click="ajaxbtnClick(name)" href="#" >@{{ name }}</a>
</li>
`,
props : {
name: { required: true },
url : { required: true },
selected: { default : false }
},
data :function () {
return {
btnActive : false
}
},
created: function () {
this.btnActive = this.selected;
},
methods : {
ajaxbtnClick : function (name) {
this.$parent.allAjaxBtn.forEach( btn => {
this.btnActive = (btn.name == name);
});
}
}
});
new Vue({
el: '#root'
});
文件。htmlimports.min.js中。您的主页应如下所示：
custom-elements.min.jsNB：对于第3步，您还可以使用document-register-element。
您无法直接在Internet Explorer中使用自定义元素v1 <head>
<script src="htmlimports.min.js"></script>
<script src="custom-elements.min.js"></script>
<link rel="import" href="your-components.html">
</head>
<body>
<your-component></your-component>
语法，因为未实现class。您首先需要使用像Babel这样的转换器来转换源代码。
或者，使用现代版本（Edge），或使用class语法。