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

    版本:HTML5废弃

    HTML <content>元素—Web 组件的技术套件的废弃部分—用于Shadow DOM内部作为insertion point,并且不可用于任何正常的 HTML,现在已被<slot>元素代替,它在 DOM 中创建一个位置,ShadowDOM 会插入这里。

    :虽然在规范的草案中出现,并且在多个浏览器中实现,这个元素依然会在规范的之后版本中移除。

    内容分类透明内容
    允许的内容流式内容
    Tag omission不允许,开始标签和结束标签都不能省略。
    允许的父元素任何接受流式内容的元素
    DOM 接口HTMLContentElement

    属性

    这个元素包含全局属性。

    • select逗号分隔的选择器列表,它们和 CSS 选择器语法相同。它们选择要插入的内容,来替换为<content>元素。

    示例

    这里是一个使用<content>元素的简单示例。它是个 HTML 文件,包含所有所需的东西。

    :为了使这个代码有效,你使用的浏览器必须支持 Web 组件,请见Enabling Web Components in Firefox。

    <html>
      <head></head>
      <body>
     <!-- the original content accessed by <content> -->
     <div>
      <h4>my content heading</h4>
      <p>my content text</p>
     </div>
    
     <script>
     // get the <div> above.
     var mycontent = document.queryselector('div');
     // create a shadow dom on the <div>
     var shadowroot = mycontent.createshadowroot();
     // insert into the shadow dom a new heading and 
     // part of the original content: the <p> tag.
     shadowroot.innerhtml =
      '<h2>inserted heading</h2> <content select="p"></content>';
     </script>
    
      </body>
    </html>
    

    如果你在 Web 浏览器中展示,它应该是这样。

    规范

    SpecificationStatusComment
    Shadow DOM
    content
    Obsolete

    上篇:<menuitem>

    下篇:<shadow>