Skate 一个功能性的反应式抽象组包

科技 07-06 来源： GitHub精选

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的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 或样式进行任何封装。这也意味着您可以提供一种投射内容的方式（即）。强烈建议您尽可能使用 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.

这是一个例子：

使用webcomponents-loader.js

这webcomponents-loader.js是一个客户端加载器，它使用特征检测动态加载最小的 polyfill 包。

webcomponents-loader.js可以根据您的需要同步或异步加载。

内联

如果你已经内联了的源webcomponent-loader.js，那么你应该指定window.WebComponents.root作为加载 polyfill 的根。例如：

此属性用于构建所选捆绑包的 URL，因此您应该只将其设置为不受用户控制数据影响的值。如果强制执行受信任类型，则此属性应为TrustedScriptURL.

同步

同步加载时，webcomponents-loader.js其行为类似于webcomponents-bundle.js.

将加载适当的包document.write()以确保 WebComponent polyfill 可用于后续脚本和模块。

这是一个例子：