阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML slot 标签

      HTML slot 功能

      HTML <slot> 元素 ,作为 Web Components 技术套件的一部分,是Web组件内的一个占位符。

      该占位符可以在后期使用自己的标记语言填充,这样您就可以创建单独的DOM树,并将它与其它的组件组合在一起。

      属性

      此元素有全局属性

      name

      插槽的名字

      拥有name属性的插槽叫具名插槽 。

      示例

      <template id="element-details-template">
        <style>
          details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
          .name {font-weight: bold; color: #217ac0; font-size: 120% }
          h4 {
            margin: 10px 0 -8px 0;
            background: #217ac0; 
            color: white;
            padding: 2px 6px;
            border: 1px solid #cee9f9; 
            border-radius: 4px;
          }
          .attributes { margin-left: 22px; font-size: 90% }
          .attributes p { margin-left: 16px; font-style: italic }
        </style>
        <details>
          <summary>
            <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
            <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
          </summary>
          <div class="attributes">
            <h4>Attributes</h4>
            <slot name="attributes"><p>None</p></slot>
          </div>
        </details>
        <hr>
      </template>
      

      属性

      <slot> 标签支持 HTML 全局属性

      事件属性

      <slot> 标签支持 HTML 事件属性

      目录
      目录