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

【问题标题】：Possible to Change Window/Tab Title using ShadowDOM可以使用 ShadowDOM 更改窗口/选项卡标题
【发布时间】：2017-05-10 09:52:39
【问题描述】：

我正在设计 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>

我得到以下信息：

【问题讨论】：

为什么不将标题设置为原始document？
由于这将在扩展中，我想避免页面的原始脚本使用标题的情况。这个想法是保留原始页面，而只更改浏览器中选项卡标题中显示的标题。原始网页中的脚本也可以修改标题，这意味着您需要随时注意更改并与页面上的其他 javascript 竞争。
不符合要求。原始document 中只有一个<title> 元素，或者应该只有一个<title> 元素，其中<title> 元素的.innerHTML 呈现为document 标题。

标签： javascript google-chrome-extension shadow-dom

【解决方案1】：

使用新的标准化 Shadow DOM 版本，您现在应该使用 attachShadow() 而不是 createShadowRoot()。不幸的是，您不能将 Shadow DOM 附加到 <title> 元素 any more。

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

另外，在<title>规范中，只有文本内容作为UI中的文档标题，所以即使使用旧版本的Shadow DOM也无法使用。

【讨论】：