Question

我正在开发Chrome扩展程序的设计。我希望能够更改选项卡中显示的标题，而无需更改真实的<title />标记。在后台脚本中，您可以将标题作为只读值访问。通常，您使用内容脚本并更改实际的<title />标记。

我正在尝试使用ShadowDOM来查看这是否是一个选项。想法是ShadowDOM以可视方式显示，但不是真实DOM的一部分，不会影响真实页面。

但是，在我的测试中，我可以添加阴影<head />和<title />元素，但它们不会更改页面标题中显示的内容。我猜这是设计，因为浏览器可能从真正的dom获得这些值，但我想检查以确定是否有办法显示“阴影标题”？

假设：

<html lang="en">
<head>
  <title>Shadow DOM Example</title>
  <meta charset="UTF-8" />
  <script>
    window.addEventListener("load", function() {

      /** Sanity check, change the content of a part of th body **/

      let realHost = document.getElementById("shadowHost");
      let hostShadow = realHost.createShadowRoot();

      hostShadow.textContent = "Shadow overlay on the body";


      /** Try Creating a Shadow in the Title **/

      let realTitle = document.getElementsByTagName("head")[0].getElementsByTagName("title")[0];
      let titleShadow = realTitle.createShadowRoot();

      titleShadow.textContent = "Created in titleShadow";


      /** Try Creating a Shadow in the Head, then add title **/

      let realHead = document.getElementsByTagName("head")[0];
      let headShadow = realHead.createShadowRoot();

      shadowTitle = document.createElement("title");
      shadowTitle.textContent = "Created in headShadow";

      headShadow.appendChild(shadowTitle);


    }, false);
  </script>
</head>
<body>
  <div id="shadowHost">
    Original Text
  </div>
</body>

我得到以下内容：

Answer 1

使用新的标准版Shadow DOM，您现在应该使用attachShadow()而不是createShadowRoot()。很遗憾，您无法将Shadow DOM附加到<title>元素any more。

因此不推荐使用它，因为它会在Chrome中引发错误。

此外，在<title>规范中，只有文本内容在UI中用作文档标题，因此即使使用旧版本的Shadow DOM也无法正常工作。

可以使用ShadowDOM更改窗口/选项卡标题

1 个答案: