如何检查某个元素是否可以托管Shadow DOM？

问题描述

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

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

if (myElement.attachShadow) {
    ...
}

似乎不起作用。

解决方法

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

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” ），但是此白名单将来可能会更改，因此使用该白名单的任何代码都需要与 规格。

,

您可以尝试这样做：

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