Skip to content

Instantly share code, notes, and snippets.

@kdzwinel

kdzwinel/LICENSE.txt

Last active February 11, 2020 17:40
Show Gist options
  • Save kdzwinel/d8f1eb07002e96066fe8 to your computer and use it in GitHub Desktop.
Save kdzwinel/d8f1eb07002e96066fe8 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Elements finder < 140 bytes (119 bytes)
Raw
README.md
Raw
annotated.js
[].__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.
}
)
Raw
index.js
[].__proto__.map.call(document.querySelectorAll("*"),function(a){a.tagName.match("-")?(a.style.border="solid red"):0});
Raw
LICENSE.txt
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.
Raw
package.json
{
"name": "Custom Elements finder",
"description": "Finds in the DOM and higlights custom elements",
"keywords": [
"custom elements",
"web components",
"polymer",
"x-tags"
]
}
Raw
test.html
<!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