• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <slot>

    版本:HTML5

    HTML <slot>元素,作为 Web Components 技术套件的一部分,是Web组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充,这样您就可以创建单独的DOM树,并将它与其它的组件组合在一起。

    浏览器支持

    Firefox、Opera、Chrome 和 Safari 浏览器都支持<slot>标签。
    注意:Internet Explorer 浏览器不支持<slot>标签。

    属性

    此元素有全局属性。

    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>
    

    下篇:<template>