本期推荐的Skate 是一个功能性的反应式抽象 Web 组件标准作为一组包，您可以使用 React、Preact 和 LitHTML 等流行的视图库编写小型、快速和可扩展的 Web 组件。
Skate特征
- 跨框架兼容组件。
- 使用您最喜欢的视图库渲染组件，或者根本不渲染。
- 在属性、属性和事件之间进行反映以及对属性、属性和事件做出反应时的最佳实践的指导约定。
- 完整的 TypeScript 支持。
Skate入门
启动和运行的最简单方法是从预先配置的元素开始，例如@skatejs/element-lit-html.
npm i @skatejs/element-lit-html简单的例子
import Element, { html } from '@skatejs/element-lit-html';
export default class extends Element {
static get props() {
return {
name: String
};
}
render() {
return html`
Hello, ${this.name}!
`;
}
}cli
有一个 CLI 可以帮助您启动并运行：
https://skatejs.netlify.com/packages/cli.
$ npm i -g @skatejs / cli
$skatejs填充物
Skate建立在 自定义元素和 影子 DOM标准。它能够在没有 Shadow DOM 的情况下运行——这只是意味着您不会对组件的 HTML 或样式进行任何封装。这也意味着您可以提供一种投射内容的方式（即<slot>）。强烈建议您尽可能使用 Shadow DOM。
尽管大多数现代浏览器都支持这些标准，但有些仍然需要 polyfill 来为它们实现缺失或不一致的行为。
浏览器支持
Skate 支持所有的常青树和 IE11，并受制于 polyfills 的浏览器支持矩阵。
webcomponents.js（v1 规范 polyfills）
一套支持Web 组件规范的 polyfill：
- Custom Elements v1：允许作者定义他们自己的自定义标签（spec、tutorial、polyfill）。
- Shadow DOM v1：通过将 DOM 子树隐藏在 shadow 根下（spec、tutorial、 shadydom polyfill、shadycss polyfill）来提供封装。
对于需要它的浏览器，还包括一些小的 polyfill：
- HTMLTemplateElement
- Promise
- Event, CustomEvent,MouseEvent构造函数和Object.assign, Array.from (参见webcomponents-platform )
- URL constructor
如何使用
安装 polyfill
npm install @webcomponents/webcomponentsjs您还可以从 CDN 加载代码，例如 unpkg：https ://unpkg.com/@
webcomponents/webcomponentsjs@^2/
使用webcomponents-bundle.js
包含所有的
webcomponents-bundle.jsweb 组件 polyfills，适用于任何支持的浏览器。所有的 polyfill 代码都将被加载，但每个 polyfill 仅用于基于特征检测。该捆绑包包括自定义元素、Shady DOM/CSS 和通用平台 polyfill（例如 ES6 Promise、可构造事件等）（Internet Explorer 11 需要）和模板（IE 11 和 Edge 需要）。
使用webcomponents-bundle.js起来非常简单，但它会加载大多数现代浏览器不需要的代码，从而减慢页面加载速度。为获得最佳性能，请使用webcomponents-loader.js.
这是一个例子：
<!-- load webcomponents bundle, which includes all the necessary polyfills -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<!-- load the element -->
<script type="module" src="my-element.js"></script>
<!-- use the element -->
<my-element></my-element>使用webcomponents-loader.js
这webcomponents-loader.js是一个客户端加载器，它使用特征检测动态加载最小的 polyfill 包。
webcomponents-loader.js可以根据您的需要同步或异步加载。
内联
如果你已经内联了 的源webcomponent-loader.js，那么你应该指定window.WebComponents.root作为加载 polyfill 的根。例如：
<script>
window.WebComponents = window.WebComponents || {};
window.WebComponents.root = 'node_modules/@webcomponents/webcomponentsjs/';
</script>此属性用于构建所选捆绑包的 URL，因此您应该只将其设置为不受用户控制数据影响的值。如果强制执行受信任类型，则此属性应为TrustedScriptURL.
同步
同步加载时，webcomponents-loader.js其行为类似于webcomponents-bundle.js.
将加载适当的包document.write()以确保 WebComponent polyfill 可用于后续脚本和模块。
这是一个例子：
<!-- load the webcomponents loader, which injects the necessary polyfill bundle -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- load the element -->
<script type="module" src="my-element.js"></script>
<!-- use the element -->
<my-element></my-element>异步
当使用该defer属性异步加载时，polyfill 包将被异步加载，这意味着依赖于 webcomponents API 的脚本和模块必须使用WebComponents.waitFor函数加载。
该WebComponents.waitFor函数将回调函数作为参数，并在加载 polyfill 包后评估该回调。
回调函数应该加载需要 polyfills 的脚本（通常是通过import(‘my-script.js’)），并且应该返回一个在所有脚本都加载后解析的 promise。
这是一个例子：
<!-- Load polyfills; note that "loader" will load these async -->
<script
src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
defer
></script>
<!-- Load a custom element definitions in `waitFor` and return a promise -->
<script type="module">
WebComponents.waitFor(() => {
// At this point we are guaranteed that all required polyfills have
// loaded, and can use web components API's.
// The standard pattern is to load element definitions that call
// `customElements.define` here.
// Note: returning the import's promise causes the custom elements
// polyfill to wait until all definitions are loaded and then upgrade
// the document in one batch, for better performance.
return import('my-element.js');
});
</script>
<!-- Use the custom element -->
<my-element></my-element>—END—
开源协议：MIT license
