カスタマイズなしの状態

カスタムエレメントmf-related-keywordsを利用する。

コード(html)

    <mf-related-keywords></mf-related-keywords>

レンダリング結果

表示言語の設定

カスタムエレメントの上位のエレメント(bodyでもよい)またはカスタムエレメント自体に 属性langを設定する。

コード(html)

    <mf-related-keywords lang="ja"></mf-related-keywords>

レンダリング結果

ヘッダをcssでカスタマイズ

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .head-bycss .mf_finder_relatedkeywords_head {
      background-color: pink;
    }
    /* content をデフォルト(Related Keywords)から「関連キーワード」へ変更 */
    .head-bycss .mf_finder_relatedkeywords_head:before {
      content: "関連キーワード";
    }
    </style>

コード(html)

    <mf-related-keywords class="head-bycss"></mf-related-keywords>

レンダリング結果

ヘッダのテキストを属性「head-text」で指定

属性 head-textで指定する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-head-text .mf_finder_relatedkeywords_head {
      background-color: pink;
    }
    /* content を空に */
    .my-head-text .mf_finder_relatedkeywords_head:before {
      content: "";
    }
    </style>

コード(html)

<mf-related-keywords class="my-head-text" head-text="関連語"></mf-related-keywords>

レンダリング結果

ヘッダのコンテンツをカスタマイズする

スロット headでテンプレートをカスタマイズする。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-head-slot .my-dd-head {
      background-color: pink;
    }
    </style>

コード(html)

    <mf-related-keywords class="my-head-slot">
      <template slot="head">
        <!-- ヘッダの先頭にアイコン設置 -->
        <header class="my-dd-head">
          <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">関連キーワード
        </header>
      </template>
    </mf-related-keywords>

レンダリング結果