阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    HTML content 标签

    HTML content 功能

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

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

    已废弃

    该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

    属性

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

    select

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

    示例

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

    <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>
    

    事件属性

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

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录