ウェブコンポーネント
【2022年版】Web Components詳細入門ガイド
フォームとの連携について(ElementInternals)。
Web Components でスタイルシートを再利用する
Constructable Stylesheet Objectsについて。
Constructable Stylesheet Objects とは、Shadow DOMを使用するときに再利用可能なスタイルを作成および配布するための新しい仕様です。
Custom State Pseudo Class
自分で擬似クラスを作るプロポーザル
宣言的に書くのではなく
code:javascript
this.img.src = "...";
this.preferences.panelWidth = "20%";
という感じで書いていけるといいのだが。
一旦querySelector()しないといけないのがだるい。
ここをLitなりStencilなりの拡張でうまく作れないものか。
Litの@queryデコレーターがそれだった。
https://lit.dev/docs/components/decorators/
JSXがそのままネストされたカスタムエレメントとしてレンダリングされればいいかも知れない。
モデルの変更に追従させるのにいい方法は?
code:html
<app-layout>
<app-controls></app-controls>
<app-main></app-main>
</app-layout>
みたいになっている時に、controlsでの大きさ設定変更とかの操作の結果をmainに反映させたい。
Reactだと、layoutにステートを持たせて、変更用関数をcontrolsに渡しつつ、ステートをmainに渡すようなやつ。
モデルオブジェクトを属性として渡したくない場合の話
プロパティとして渡すのは?
video.srcObject = mediaStreamみたいなこと
属性にJSON.stringify()して渡すよりはマシ
候補一、抽象的なモデルを定義して、イベントターゲットに
それが嫌でみんなElmアーキテクチャーにしているんだろうけど
候補二、mainがcontrolsのイベントをリスンする
DOMっぽいと思うけど、イベントリスナーの削除処理を書くのがボイラープレート化してだるい
LitのReactive Controller使える?
候補三、layoutをイベントバスにする
か、その下にイベントバス用の要素を挟んでもいいけど
候補四、URIフラグメントをイベントバスにする
gemini://space.matthewphillips.info/posts/where-web-components-went-wrong/