Похоже что у кастомных (не зарегистрированных) элементов прототип HTMLUnknownElement
- тогда как у стандартных прототипом является его предок HTMLElement
, а у зарегистрированных свои прототипы.
Соответственно, определить незарегистрированный кастомный элемент можно по этому признаку, выражением
element instanceof HTMLUnknownElement
Под спойлером ниже, пример кода с простейшим методом Element.isCustom()
, и функцией поиска кастомных элементов по селектору - getCustomElements()
:
HTMLElement.prototype.isCustom = function () {
return this instanceof HTMLUnknownElement;
};
function getCustomElements(selector, fromElement = null) {
let result = [],
allEls = (fromElement || document).querySelectorAll(selector);
for (let el of allEls) {
if (el.isCustom())
result.push(el);
}
return result;
}
let cntnr = document.querySelector('#container');
cntnr.addEventListener('click', e => {
let els = document.querySelectorAll('.found');
els.forEach(el => el.classList.remove('found'));
let selector = e.target.dataset.selector;
if (!selector)
return;
els = getCustomElements(selector);
els.forEach(el => el.classList.add('found'));
});
#container { height: calc(100vh - 10px); }
#container * {
display: inline-block;
min-width: 40px;
line-height: 2em;
margin: 4px; padding: 10px;
font: 16px sans-serif; color: #000;
border: 1px dashed #aaa;
}
#container > span {
background-color: #777;
border: none;
text-transform: uppercase;
color: #fff;
cursor: pointer;
}
#container .found {
border: 1px solid #d44;
color: #d44;
}
#container test.found {
border: 1px solid #2a2;
color: #2a2;
}
<div id="container">
<span data-selector="*">Найти все кастомные</span>
<span data-selector="test">Найти только <test></span>
<br>
<div>div</div>
<zinaida>zinaida</zinaida>
<test>test 1</test>
<pavel>
pavel
<some>some</some>
<span>span</span>
<test>test 2</test>
</pavel>
<p>p</p>
</div>
Необязательным параметром fromElement
задается тот элемент, от которого будет выполняться поиск ("вниз" по DOM).
Клик по области результата сбрасывает классы с найденных элементов.
В целом, код достаточно простой, думаю что он не требует подробных пояснений :)
Источники инфы:
https://stackoverflow.com/q/27334365
HTMLUnknownElement (MDN)
regexp
всегоhtml
?