javascript - 如何避免 Section 标签中的相同 html 代码？

Question

我有 3 个部分，里面有相同的 html 代码，我怎样才能避免这种情况，有没有办法给他们一段 html 代码或作为 html、javascript...等的代码模板谢谢，关于问候。

    <section class="Movie-list-1"> 
       <h1> New movies </h1>
       <!--  10 divs here-->
    </section>
    <section class="Movie-list-2"> 
        <h1> 4k movies </h1>
     <!-- 10 divs here -->
    </section>
    <section class="Movie-list-3"> 
       <h1> New movies </h1>
     <!--  10 divs here -->
    </section>

标签： javascripthtml

Answer 1

您可以创建一个并在带有插槽的自定义元素<template>中重用它：

customElements.define('movie-list', class MovieList extends HTMLElement {
  constructor() {
    super();
    this
      .attachShadow({
        mode: 'open'
      })
      .appendChild(document.getElementById('movie-list').content.cloneNode(true));
  }
})

<template id="movie-list">
<section class="movie-list">
  <h1><slot name="title">New movies</slot></h1>
  <slot name="divs"></slot>
</section>
</template>

<movie-list>
  <span slot="title">New Movies</span>
  <div slot="divs">
    <div>Foo</div>
    <div>Bar</div>
    <div>Baz</div>
  </div>
</movie-list>

<movie-list>
  <span slot="title">Top Movies</span>
  <div slot="divs">
    <div>Foo!!</div>
    <div>Bar?!</div>
    <div>Baz!?</div>
  </div>
</movie-list>

这是它在 DOM 中的样子：