Skate is a functional reactive abstraction over the web component standards as a set of packages that enables you to write small, fast and scalable web components using popular view libraries such as React, Preact and LitHTML.
The simplest way to get up and running is to start with a pre-configured element such as @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}!
`;
}
}
There's a CLI to get you up and running: https://skatejs.netlify.com/packages/cli.
$ npm i -g @skatejs/cli
$ skatejs
Skate builds upon the
Custom Elements and
the Shadow DOM standards.
It is capable of operating without the Shadow DOM — it just means you
don't get any encapsulation of your component's HTML or styles. It also means
that it's up to you to provide a way to project content (i.e. <slot>
). It's
highly recommended you use Shadow DOM whenever possible.
Though most modern browsers support these standards, some still need polyfills to implement missing or inconsistent behaviours for them.
For more information on the polyfills, see the web components polyfill documentation, emphasis on the caveats.
Skate supports all evergreens and IE11, and is subject to the browser support matrix of the polyfills.
Support us with a monthly donation and help us continue our activities. Become a backer!
Become a sponsor and get your logo on our README on Github with a link to your site. Become a sponsor!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。