如何檢查元素是否可以托管 Shadow DOM？

Question

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

如何驗證元素是否支持 Shadow DOM？

if (myElement.attachShadow) {
    ...
}

似乎不起作用。

Answer 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" ) ) );

如果你真的願意，你也可以使用規范算法，它是有效自定義元素名稱和文章中白名單的組合（即今天， “文章”、“旁白”、“塊引用”、“正文” ", "div", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "header", "main", "nav", "p", "section" 或 "span" )，但是此白名單將來可能會更改，因此任何使用它的代碼都需要隨規范一起更新。

Answer 2

你可以嘗試這樣做：

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