Skip to content

Instantly share code, notes, and snippets.

@kdzwinel kdzwinel/LICENSE.txt
Last active Feb 11, 2020

Embed
What would you like to do?
Custom Elements finder < 140 bytes (119 bytes)
[].__proto__.map.call( //Looping through a NodeList is no fun. We have to call Arrays 'map' (shorter than 'forEach') method for help.
document.querySelectorAll('*'), // This gives us a list of all nodes in the document.
function(i) {
i.tagName.match('-') ? // Tag names for custom elements are required to contain a dash (-). And that's how we recognize them.
(i.style.border = 'solid red') : 0 // Just a way of highlighting the nodes.
}
)
[].__proto__.map.call(document.querySelectorAll("*"),function(a){a.tagName.match("-")?(a.style.border="solid red"):0});
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "Custom Elements finder",
"description": "Finds in the DOM and higlights custom elements",
"keywords": [
"custom elements",
"web components",
"polymer",
"x-tags"
]
}
<!DOCTYPE html>
<title>Custom Elements finder</title>
<body>
<script>
var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());
[].__proto__.map.call(document.querySelectorAll("*"),function(a){a.tagName.match("-")?(a.style.border="solid red"):0});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.