返回列表

chrome已经完全支持slot

默认分类 2019/05/09 09:26

示例地址:http://haiyang.me/html5/slot.html

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>Slot Example</title>
    <style>
      element-details {border: 1px solid blue; display: block; }
    </style>
  </head>
  <body>
    <template id="element-details-template">
      <div>
        <slot name="element-name">NEED NAME</slot>
        <slot name="attributes"><p>PLACEHOLDER</p></slot>
      </div>
    </template>

    <element-details>
      <div slot="element-name">Slot.</div>
      <div slot="attributes">The name of the slot 111.</div>
      <div slot="attributes">The name of the slot 222.</div>
    </element-details>
    <hr>
    <element-details>
      <div slot="element-name">Template</div>
    </element-details>
    <hr>
    <element-details>None</element-details>

    <script>
    customElements.define('element-details',
      class extends HTMLElement {
        constructor() {
          super()
          const template = document.getElementById('element-details-template').content
          const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true))
        }
      })
    </script>
  </body>
</html>


>> 留言评论