State without customization

Use custom element mf-keyword-ranking.

code

html

  <mf-keyword-ranking></mf-keyword-ranking>

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-keyword-ranking lang="ja"></mf-keyword-ranking>

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_keywordranking_head {
    background-color: pink;
  }
  /* Change content of the title from default value (Keyword Ranking) to “popular words” */
  .head-bycss .mf_finder_keywordranking_head:before {
    content: "popular words";
  }
  </style>

html

  <mf-keyword-ranking class="head-bycss"></mf-keyword-ranking>

Render result

Specify header text by attribute "head-text"

code

Add css

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

html

  <mf-keyword-ranking class="my-head-text" head-text="Hot keywords"></mf-keyword-ranking>

Render result

Customize the contents of the header

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-keyword-ranking class="my-head-slot">
    <template slot="head">
      <!-- Icon setting for header -->
      <header class="my-dd-head">
        <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">Keyword ranking
      </header>
    </template>
  </mf-keyword-ranking>

Render result