如何解决如何检查某个元素是否可以托管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
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。