HTML<slot>标签

HTML 标签

插槽是 Web 组件技术的元素部分，它是组件内的占位符，您可以简单地用自己的标记填充它，它允许您制作单独的 DOM 树并将它们一起表示。

句法：

    
Heading

属性：

• name：描述插槽的名称。

方法：在下面给出的示例代码中使用了以下元素。

• 模板：模板元素用于声明将通过脚本插入到文档中的 HTML 片段。在将内容添加到脚本中的文档之前，不会呈现内容。这通常是包含元素的部分。
• 内容：这部分包含插入到模板中 元素所在位置的内容。所以在这种情况下，span 元素会发现自己在哪里可以找到元素。每个 span 元素通过其slot属性引用一个选定的 元素。您简单地包含在模板元素中的任何 CSS 仅应用于 DOM 树。它不会影响页面的其余部分。
• 脚本：主列表插入元素，但第二个列表没有。主要样式在模板元素中声明，这表明它们仅适用于该影子 DOM 树中的 HTML 元素。如果样式在模板元素之外，则这些样式仅应用于第二个列表，因此第一个列表没有样式。

例子：

HTML

  

    
        h1 {
            font-size: 2.2em;
            font-family: Arial, Helvetica, sans-serif;
            color: coral;
        }
  
        dl {
            border-left: 5px solid yellowgreen;
            padding-left: 1em;
        }
  
        dt {
            font-weight: bold;
            font-size: 2em;
        }
  
        dd {
            color: darkslategray;
            font-size: 1.6em;
        }
    

  

    
  
    
        GeeksforGeeks
        GFG
        
            A computer science portal for geeks
        
        Slot tag
        
            Create separate DOM trees and present them together.
        
    
      
    
        let dlTemplate = document.querySelector('template').content;
        let sections = document.querySelectorAll('section');
  
        sections.forEach(function (section) {
            section.attachShadow({ mode: 'open' }).appendChild(
                dlTemplate.cloneNode(true))
        });
    

  

输出：

支持的浏览器：

• 铬合金
• 边缘
• 火狐
• 勇敢的
• 歌剧
• 苹果浏览器
• IE浏览器