如何检查元素是否可以托管 Shadow DOM？答案

【问题标题】：How can i check whether an element can host Shadow DOM?如何检查元素是否可以托管 Shadow DOM？
【发布时间】：2021-02-06 07:03:38
【问题描述】：

允许 Shadow DOM 的元素在此处指定： https://docs.w3cub.com/dom/element/attachshadow/

如何验证元素是否支持 Shadow DOM？

if (myElement.attachShadow) {
    ...
}

似乎不起作用。

【问题讨论】：

标签： javascript web-component shadow-dom custom-element

【解决方案1】：

如果不支持，您可以尝试捕获。

try {
   let shadowRoot = elem.attachShadow( { mode: "open" } );
   shadowRoot.innerHTML = ...;
   return true;
} catch( err ) {
   return false;
}

你也可以把它变成一个助手，但如果你需要多次使用它，那么在检查每个元素后存储结果可能是个好主意。

function canAttachShadow( elem ) {
  try {
    elem.cloneNode().attachShadow( { mode: "open" } );
    return true;
  }
  catch( err ) {
    return false;
  }
}
  
console.log( "a", canAttachShadow( document.createElement( "a" ) ) );
console.log( "article", canAttachShadow( document.createElement( "article" ) ) );

如果你真的愿意，你也可以使用 specs 算法，它结合了 valid-custom-element-name 和您文章中的white list（即今天，“article”，“aside”， “blockquote”、“body”、“div”、“footer”、“h1”、“h2”、“h3”、“h4”、“h5”、“h6”、“header”、“main”、“nav” "、"p"、"节"或 "span")，但是此白名单将来可能会更改，因此任何使用它的代码都需要与规格。

【讨论】：

啊，是的，检查错误可能是最好的方法。我编辑了你的答案，看看你是否认为它看起来不错 - 否则就回滚。
@swelet 地面编辑没问题，但是下次注意别把里面的代码弄坏了;-)

【解决方案2】：

你可以试试这样：

if (document.myElement.createShadowRoot || document.myElement.attachShadow) {
    // support shadow DOM
} else {
    // not support
}

【讨论】：

感谢您的回复，但除了添加检查（现已弃用）.createShadowRoot 我看不出这与我之前尝试过的有何不同。另外，顺便说一句，这不适用于不了解 .createShadowRoot 的 Typescript。 +1 考虑旧版浏览器。