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

Question

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

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

if (myElement.attachShadow) {
    ...
}

似乎不起作用。

Answer 1

如果不受支持，您可以 try catch 。

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", "nav "、"p"、"部分"或"span")，但是这个白名单将来可能会改变，所以任何使用它的代码都需要随着规范。