https://svelte-aplayer.js.org/
造轮子，连带着把玩Svelte。Svelte是一个编译期实现reactivity的库（编译器）。他以等号赋值作为触发状态更改的语句，$: 作为reactive statement的标识。而且他是会自动管理依赖的，不需要像react一样每次都rerender都重新计算或着用useCallback,useMemo之类手动管理依赖变化。
它可以和其他需要runtime的库混搭在一起而不用额外引入runtime。这就很适合Custom Element(WebComponent) Svelte也提供编译成Custom Element的选项。
在之前用Svelte写过一些组件，体验非常舒适。但是用它编译成Custom Element还有一些需要注意的地方。
在Custom Element里混着写Svelte component还是个问题sveltejs/svelte#3594。解决的方法是全部写到一个组件里,可以用svelte/store把纯状态的部分分离出来，对相对小而且独立的组件来说不是啥问题。
props和事件怎么整？
Svelte里用export来创建props。首先我们要区分attributes和property。举个例子一个HTMLElementel,el.style是property,el.getAttribute('style')是attribute。property可以是各种东西，attribute只能是字符串。
在Custom Element中property是一个getter,setter，而attribute有attributeChangedCallback，结合一下就可以做到双向attribute，property双向绑定。
我们平时在jsx中传props的写法在custom element中是attribute,而wc.prop = value的形式赋值改的是property。
在Svelte组件中，export定义的property,但attribute写法只能传字符串。需要做兼容处理，在Svelte里就是一个$:的事。
Svelte有createEventDispatcher,做兼容处理
import { createEventDispatcher } from 'svelte';
import { get_current_component } from "svelte/internal";
...
const component = get_current_component();
const svelteDispatch = createEventDispatcher();
const dispatch = (name, detail?: any) => {
svelteDispatch(name, detail);
component.dispatchEvent &&
component.dispatchEvent(new CustomEvent(name, { detail }));
};
这样就可以用addEventListener对custom element监听事件了。2021了不会有人还在attribute中直接写onxxx了吧确信
关于各种框架和custom element的互操作在这里有相关的汇总。
custom element 可以在各种能自定义html的地方直接用，比如说能够作为hexo-tag-aplayer的简单替代了。而且语法不需要依赖特定的实现（hexo）。