Islands

Web Components による部分的ハイドレーション。

基本的な使い方

<wc-counter
  luna:wc-url="/static/wc-counter.js"
  luna:wc-state='{"count":0}'
  luna:wc-trigger="visible">
  <template shadowrootmode="open">
    <button>Count: 0</button>
  </template>
</wc-counter>

Custom Element として customElements.define() を呼ぶ必要は 無い。 loader は [luna:wc-url] 属性を持つ要素を直接スキャンする。 Declarative Shadow DOM (<template shadowrootmode="open">) はオプション。

属性

トリガー

hydrateWC 関数

import { createSignal, hydrateWC } from '@luna_ui/luna';

function Counter(props: { count: number }) {
  const [count, setCount] = createSignal(props.count);

  return (
    <>
      <style>{`:host { display: block; }`}</style>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count()}
      </button>
    </>
  );
}

hydrateWC('wc-counter', Counter);