SPA/SSR/SSGなど

SPAやSSR、SSGなどを採用しているウェブサイトの場合、ページ遷移がないので、MFXなどのウェブコンポーネントをルートの.htmlファイル（index.htmlやmain.htmlなど）に直接埋め込むのではなく、特定のコンポーネントやテンプレート内に配置する必要がある場合があります。このような状況では、フレームワークの指定する方法に従い、適切な埋め込み処理を行ってください。

Vanilla JavaScript (HTML)

HTML テンプレートをコンパイルしないため、HTML テンプレートを直接埋め込むことができます。

    <mf-search-box></mf-search-box>

JSファイルの読み込み方法:

<script
  src="https://ce.mf.marsflag.com/latest/js/mf-search.js"
  async
  type="module"
></script>

React、Preact、Next.js

React と Preact は HTML テンプレートをコンパイルしないため、JSX を使用して Web コンポーネントを直接埋め込むことができます。Next.js は React に基づいており、同様の方法で Web コンポーネントを使用します。

    <my-component></my-component>

JSファイルの読み込み方法:

import { useEffect } from 'react';

function MyApp() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://ce.mf.marsflag.com/latest/js/mf-search.js";
    script.async = true;
    script.type = "module";
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>
  アプリケーションコンテンツ
  <mf-search-box></mf-search-box>
</div>;
}

Vue、Nuxt.js

Vue および Nuxt.js では、v-preディレクティブを使用して Web コンポーネント内のテンプレートコンパイルをスキップします。

    <my-component v-pre></my-component>

JSファイルの読み込み方法:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = "https://ce.mf.marsflag.com/latest/js/mf-search.js";
  script.async = true;
  script.type = "module";
  document.body.appendChild(script);

  onUnmounted(() => {
    document.body.removeChild(script);
  });
});
</script>

<template>
  <div>
    アプリケーションコンテンツ
  <mf-search-box></mf-search-box>
  </div>
</template>

Vue.js のドキュメントによると、v-preディレクティブは、テンプレートコンパイラによってコンパイルされないことを示すために使用されます。

Angular

Angular の SSR は Angular Universal を通じて実現され、SSG はビルド時に各ルートを静的ページとして生成します。ngNonBindable ディレクティブを使用して、要素の Angular コンパイルを無視します。

    <my-component ngNonBindable></my-component>

JSファイルの読み込み方法:

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div>
    アプリケーションコンテンツ
    <mf-search-box></mf-search-box>
  </div>`,
})
export class AppComponent implements OnInit, OnDestroy {
  ngOnInit() {
    const script = document.createElement('script');
    script.src = "https://ce.mf.marsflag.com/latest/js/mf-search.js";
    script.async = true;
    script.type = "module";
    document.body.appendChild(script);
  }

  ngOnDestroy() {
    // Remove the script when the component is destroyed
    document.querySelectorAll('script[src="' + "https://ce.mf.marsflag.com/latest/js/mf-search.js" + '"]').forEach(el => el.remove());
  }
}

Svelte

Svelteでは、生のHTMLを埋め込むために{@html ...}ディレクティブを使用しますが、Markdown内でエスケープが必要です。

    <div>{@html `<my-component></my-component>`}</div>

JSファイルの読み込み方法:

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    const script = document.createElement('script');
    script.src = "https://ce.mf.marsflag.com/latest/js/mf-search.js";
    script.async = true;
    script.type = "module";
    document.body.appendChild(script);
  });
</script>

<div>
  アプリケーションコンテンツ
  <mf-search-box></mf-search-box>
</div>

PHP, WordPress

PHP では、echoを使用して生の HTML を埋め込みます。

    <?php echo '<my-component></my-component>'; ?>

JSファイルの読み込み方法:

<?php
  $script = '<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" async type="module"></script>';
  echo $script;
?>

Astro

Astro は、特別なディレクティブは不要で、Web コンポーネントを通常の HTML 要素として埋め込みます。

<mf-search-box></mf-search-box>

JSファイルの読み込み方法:

<script
  src="https://ce.mf.marsflag.com/latest/js/mf-search.js"
  async
  type="module"
></script>

Ruby on Rails

Ruby on Rails では、rawヘルパーを使用して生の HTML を埋め込みます。

    <%= raw '<my-component></my-component>' %>

JSファイルの読み込み方法:

<%= raw '<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" async type="module"></script>' %>

Ember.js

Ember.jsでは、コメント構文を使い、テンプレートの一部を無視することができます。

    {{!-- <my-component></my-component> --}}

JSファイルの読み込み方法:

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class SomeComponent extends Component {
  @action
  loadScript() {
    const script = document.createElement('script');
    script.src = "https://ce.mf.marsflag.com/latest/js/mf-search.js";
    script.async = true;
    script.type = "module";
    document.body.appendChild(script);
  }
}

Solid.js

Solid.js では、特別なディレクティブは不要で、Web コンポーネントを通常の HTML 要素として埋め込みます。

    <my-component></my-component>

JSファイルの読み込み方法:

import { onMount } from 'solid-js';

const MyComponent = () => {
  onMount(() => {
    const script = document.createElement('script');
    script.src = "https://ce.mf.marsflag.com/latest/js/mf-search.js";
    script.async = true;
    script.type = "module";
    document.body.appendChild(script);
  });

  return <div>
    アプリケーションコンテンツ
    <mf-search-box></mf-search-box>
  </div>;
};

Qwik

Qwik では、コンポーネントは遅延読み込みされ、特別なディレクティブなしに使用します。

    <my-component></my-component>

JSファイルの読み込み方法:

import { component$, useMount$ } from '@builder.io/qwik';

export const MyComponent = component$(() => {
  useMount$(() => {
    const script = document.createElement('script');
    script.src = "https://ce.mf.marsflag.com/latest/js/mf-search.js";
    script.async = true;
    script.type = "module";
    document.body.appendChild(script);
  });

  return <div>
    アプリケーションコンテンツ
    <mf-search-box></mf-search-box>
  </div>;
});
iv>
  )
})