我如何检查元素是否可以承载 Shadow DOM？

Question

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

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

if (myElement.attachShadow) {
    ...
}

好像不行。

Answer 1

你可以尝试这样做：

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

Answer 2

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

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（即今天，“文章”、“旁白”、 "blockquote", "body", "div", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "header", "main ”、“导航”、“p”、“部分”或 "span")，但是这个白名单将来可能会改变，所以任何使用它的代码都需要随着规格。

我如何检查元素是否可以承载 Shadow DOM？

How can i check whether an element can host Shadow DOM?

javascript

web-component

shadow-dom

custom-element