你的前端框架要被 Web 组件取代了(13)

增强的按钮现在可以与 is 属性一起使用：
<button is="my-button">
它现在将通过我们的 MyElement 类增强，如果它在不支持自定义元素的浏览器中加载，它将简单地回退到标准按钮，这就是所谓渐进式的增强！
注意，在扩展现有元素时不能使用 Shadow DOM。这只是通过继承所有现有属性、方法和事件并提供其他功能来扩展原生 HTML 元素的一种方法。当然可以从组件中修改元素的 DOM 和 CSS，但是尝试创建影子根时将引发错误。
扩展内置元素的另一个好处是，这些元素也可以用于对子元素有限制的地方。例如，<thead>元素只允许将<tr>元素作为其子元素，因此像<awesome-tr>这样的元素将呈现无效标记。在这种情况下，我们可以扩展内置的<tr>元素并像这样使用它：

<table> <thead> <tr is="awesome-tr"></tr> </thead></table>
这种创建 Web 组件的方式是一种很好的渐进式增强，但如上所述，目前只有 Chrome 和 Firefox 支持它。 Edge 也将提供支持，但至少目前没有。
测试 Web Components与为 Angular 和 React 等框架编写测试相比，测试 Web Components 更加简单明了，坦率地说是轻而易举的。你不需要转换或复杂的设置，只需创建元素，将其附加到 DOM 并运行测试即可。
以下是使用 Mocha 测试的示例：

import 'path/to/my-element.js'; describe('my-element', () => { let element; beforeEach(() => { element = document.createElement('my-element'); document.body.appendChild(element); }); afterEach(() => { document.body.removeChild(element); }); it('should test my-element', () => { // run your test here });});
这里第一行导入 my-element.js 文件，该文件将我们的 Web Components 暴露为 ES6 模块。这意味着测试文件本身也需要作为 ES6 模块加载到浏览器中。这需要下面的 index.html 才能在浏览器中运行测试。除了 Mocha 之外，这个设置还加载了 WebcomponentsJS polyfill，Chai 用于测试，Sinon 用于 spy 和 mock：