State without customization

Use the custom element mf-related-keywords.

code

html

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

Render result

Setting display language

Set the attribute "lang" to the upper element of the custom element (which may be the body) or the custom element itself.

code

html

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

Render result

Customize header with css

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .head-bycss .mf_finder_relatedkeywords_head {
    background-color: pink;
  }
  /* Change content default value(Related keywords) to “More related keywords” */
  .head-bycss .mf_finder_relatedkeywords_head:before {
    content: "More related keywords";
  }
  </style>

html

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

Render result

Specify header text by attribute "head-text"

Use attribute "head-text".

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-head-text .mf_finder_relatedkeywords_head {
    background-color: pink;
  }
  /* Set content to empty */
  .my-head-text .mf_finder_relatedkeywords_head:before {
    content: "";
  }
  </style>

html

  <mf-related-keywords class="my-head-text" head-text="You may be interested in"></mf-related-keywords>

Render result

Customize the contents of the header

Customize the template with slot head.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-head-slot .my-dd-head {
    background-color: pink;
  }
  </style>

html

  <mf-related-keywords class="my-head-slot">
    <template slot="head">
      <!-- set icon before header -->
      <header class="my-dd-head">
        <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">Related keywords
      </header>
    </template>
  </mf-related-keywords>

Render result