用svelte.js开发web components

---

前言

最近有点闲，看到svelte.js，一个挺好玩的框架，搭配rollup开发相当丝滑，api就我而言，比vue、react那些都好用~
尤大说的比较中肯，它属于小而美的类型，构建复杂项目可能会有压力；但用来做小项目，活动页，编译可独立分发的 web components等，则很合适，今天我那它做个组件尝尝味道。

---

一、web components是什么？

其实这玩意就是自定义html组件，等于你创建了个video标签，并实现了标签内部的功能逻辑，可在多处复用。关于它的文档在这里，还有阮一峰的简单入门示例，可自行查阅。

二、使用步骤

1.起步

svelte.js 搭建项目，其实就装几个包，简单配置一下rollup就完事的了，没啥好说的。
官方也有提供了template工程，懒癌发作就clone或者下载项目即可。

npx degit sveltejs/component-template info-card
// or 直接下载
https://github.com/sveltejs/component-template

2.构建示例

<svelte:options tag="info-card" />
<div id="app" bind:this={
   self}>
  <h1 class=