阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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的教程都有!

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

      目录
      目录