DOM指定マウント方式なコンポーネントを作りたい
miyanokomiyasvelteでcustom elementにしないというのが一番求めているものに近いかもしれない。
この場合はsvelteコンポーネントの挙動通りでpropsをnew時点で渡せる。
new App({ target, props })
コンポーネントを単体でlibビルドするだけでいい、これが答えっぽい。
build: {
lib: {
entry: path.resolve(__dirname, 'src/Target.svelte'),
name: 'target-element',
}
}
こういうやつ。
import { Player } from 'blendic-svg-player'
const player = new Player('target_id', {
width: '100%',
height: '100%',
})
web componentが登場しているものの、昔ながらのこの方式の使い勝手が捨てがたい。
しかしこの方式を実現するのに適したツールがない（多分）。つまりオプションの渡し方やレンダリングの更新やらは自作しないといけなくなって面倒が多い。
miyanokomiyacustom elementになっているとattributeとして文字列を渡すことしかできない。
入り組んだデータを渡したい場合はJSON.stringifyが必要だったりと微妙。
miyanokomiyaattributeで宣言的に渡すのは諦めてscriptからpropsとして渡してもらう前提にすればいいかもしれない。
そしてこの方法ならdom指定マウント方式と似た使用感になるか？
miyanokomiya似た使用感になる気もするけどscript側で触る前提のcustom elementに存在意義があるのか問題。
それならやはり最初からdom指定マウント方式になっていた方が分かりやすい。
script制御なしで宣言的にも設置できるよう両対応しておけるならありか。
miyanokomiyaこういう使い方もできはする。この方向がいいかもしれない。
const myComponent = document.createElement('my-component')
myComponent.foo = [1, 2, 3]
document.body.append(myComponent )
svelte利用のcustom componentだとこういう風にscript側でnewすることもできる（custom element自体がそういう仕様なのか？）。
マウントと同時にpropsを渡せないので、createElementするのと実質大差ないかもしれない。
.es.jsになっていてもimportした時点でグローバルにelementが登録されるしで。
miyanokomiyaImageなんかもnewしてからsrcなどしていくからHTMLElementというのはそういうものなのかもしれない。
new時に必須なpropsはない。ただしappendなりされてレンダリングされるときには必須扱いとなるpropsがある。そのライフサイクルイベントで必須チェックを行えばいい（できるのか？）。
miyanokomiyacustom element側ではconnectedCallbackがそれにあたるっぽい。
miyanokomiyaこのissue見るにonMountedがそれに対応してるような気がする。でも実際にそうなっていない気もする。
miyanokomiya↑のissueよく見たらロングランしていて結局戻されたような気配ある。まだ揉めているのかもしれない。
実際に試してみてもやはりonMount時点でpropsは渡っていない。
miyanokomiya親側でonMountよりも前のタイミングでnewするとなぜかpropsを渡せる。
$: {}記法でマウント先のelementをtargetにすればそうなる。
このあたり怪しさ満載でまだ実用的ではない可能性高い。
miyanokomiyaどちらにせよやはりnewと同時にpropsを渡すことはできない。
custom elementとはそういうもの。