Skip to content

Instantly share code, notes, and snippets.

@ebidel

ebidel/highlight_custom_elements.js

Last active June 13, 2022 21:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ebidel/4bdbe9db55d8a775d0a4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ebidel/4bdbe9db55d8a775d0a4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ebidel revised this gist Jul 31, 2016. 2 changed files with 22 additions and 10 deletions.
    30 changes: 21 additions & 9 deletions highlight_custom_elements.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,30 @@
    // Highlights all custom elements on the page.
    // 7/31/2016: updated to work with both shadow dom v0 and v1.
    // To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html

    var allElements = document.all;
    if (!!HTMLElement.prototype.createShadowRoot) {
    try { // FF barfs on /deep/ in qSA().
    allElements = document.querySelectorAll('html /deep/ *');
    } catch(e) {
    // noop
    var allCustomElements = [];

    function isCustomElement(el) {
    const isAttr = el.getAttribute('is');
    // Check for <super-button> and <button is="super-button">.
    return el.localName.includes('-') || isAttr && isAttr.includes('-');
    }

    function findAllCustomElements(nodes) {
    for (let i = 0, el; el = nodes[i]; ++i) {
    if (isCustomElement(el)) {
    allCustomElements.push(el);
    }
    // If the element has shadow DOM, dig deeper.
    if (el.shadowRoot) {
    findAllCustomElements(el.shadowRoot.querySelectorAll('*'));
    }
    }
    }

    allElements = Array.prototype.slice.call(allElements).filter(function(el) {
    return el.localName.indexOf('-') != -1 || el.getAttribute('is');
    }).forEach(function(el, i) {
    findAllCustomElements(document.querySelectorAll('*'));

    allCustomElements.forEach(function(el, i) {
    el.style.outline = '1px dashed red';
    el.style.backgroundColor = 'rgba(255,0,0,0.1)';
    });
    2 changes: 1 addition & 1 deletion highlight_custom_elements_bookmarklet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    javascript:(function(){var allElements=document.all;if(!!HTMLElement.prototype.createShadowRoot){try{allElements=document.querySelectorAll('html /deep/ *');}catch(e){}}allElements=Array.prototype.slice.call(allElements).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).forEach(function(el,i){el.style.outline='1px dashed red';el.style.backgroundColor='rgba(255,0,0,0.1)';});})();
    javascript:(function(){var allCustomElements=[];function isCustomElement(el){const isAttr=el.getAttribute('is');return el.localName.includes('-')||isAttr&&isAttr.includes('-');}function findAllCustomElements(nodes){for(let i=0,el;el=nodes[i];++i){if(isCustomElement(el)){allCustomElements.push(el);}if(el.shadowRoot){findAllCustomElements(el.shadowRoot.querySelectorAll('*'));}}}findAllCustomElements(document.querySelectorAll('*'));allCustomElements.forEach(function(el,i){el.style.outline='1px dashed red';el.style.backgroundColor='rgba(255,0,0,0.1)';});})();
  2. ebidel revised this gist May 8, 2014. 2 changed files with 2 additions and 3 deletions.
    3 changes: 1 addition & 2 deletions highlight_custom_elements.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,6 @@ if (!!HTMLElement.prototype.createShadowRoot) {
    allElements = Array.prototype.slice.call(allElements).filter(function(el) {
    return el.localName.indexOf('-') != -1 || el.getAttribute('is');
    }).forEach(function(el, i) {
    el.style.border = '1px dashed red';
    //el.style.margin = '3px';
    el.style.outline = '1px dashed red';
    el.style.backgroundColor = 'rgba(255,0,0,0.1)';
    });
    2 changes: 1 addition & 1 deletion highlight_custom_elements_bookmarklet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    javascript:(function(){var allElements=document.all;if(!!HTMLElement.prototype.createShadowRoot){try{allElements=document.querySelectorAll('html /deep/ *');}catch(e){}}allElements=Array.prototype.slice.call(allElements).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).forEach(function(el,i){el.style.border='1px dashed red';el.style.backgroundColor='rgba(255,0,0,0.1)';});})();
    javascript:(function(){var allElements=document.all;if(!!HTMLElement.prototype.createShadowRoot){try{allElements=document.querySelectorAll('html /deep/ *');}catch(e){}}allElements=Array.prototype.slice.call(allElements).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).forEach(function(el,i){el.style.outline='1px dashed red';el.style.backgroundColor='rgba(255,0,0,0.1)';});})();
  3. ebidel renamed this gist May 8, 2014. 1 changed file with 0 additions and 0 deletions.
    0 highlight_custom_elements_bookmarket.js → highlight_custom_elements_bookmarklet.js
    View file
    File renamed without changes.
  4. ebidel revised this gist May 8, 2014. 3 changed files with 20 additions and 9 deletions.
    20 changes: 19 additions & 1 deletion highlight_custom_elements.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,19 @@
    javascript:(function(){var allElements=Array.prototype.slice.call(document.querySelectorAll('html /deep/ *'));allElements=allElements.filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).forEach(function(el,i){el.style.border='3px solid red';});})();
    // Highlights all custom elements on the page.
    // To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html

    var allElements = document.all;
    if (!!HTMLElement.prototype.createShadowRoot) {
    try { // FF barfs on /deep/ in qSA().
    allElements = document.querySelectorAll('html /deep/ *');
    } catch(e) {
    // noop
    }
    }

    allElements = Array.prototype.slice.call(allElements).filter(function(el) {
    return el.localName.indexOf('-') != -1 || el.getAttribute('is');
    }).forEach(function(el, i) {
    el.style.border = '1px dashed red';
    //el.style.margin = '3px';
    el.style.backgroundColor = 'rgba(255,0,0,0.1)';
    });
    1 change: 1 addition & 0 deletions highlight_custom_elements_bookmarket.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    javascript:(function(){var allElements=document.all;if(!!HTMLElement.prototype.createShadowRoot){try{allElements=document.querySelectorAll('html /deep/ *');}catch(e){}}allElements=Array.prototype.slice.call(allElements).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).forEach(function(el,i){el.style.border='1px dashed red';el.style.backgroundColor='rgba(255,0,0,0.1)';});})();
    8 changes: 0 additions & 8 deletions source.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +0,0 @@
    // Highlights all custom elements on the page.
    // To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html
    var allElements = Array.prototype.slice.call(document.querySelectorAll('html /deep/ *'));
    allElements = allElements.filter(function(el) {
    return el.localName.indexOf('-') != -1 || el.getAttribute('is');
    }).forEach(function(el, i) {
    el.style.border = '3px solid red';
    });
  5. ebidel renamed this gist May 7, 2014. 1 changed file with 0 additions and 0 deletions.
    0 customelement_bookmarklet.js → highlight_custom_elements.js
    View file
    File renamed without changes.
  6. ebidel renamed this gist May 7, 2014. 1 changed file with 0 additions and 0 deletions.
    0 bookmarklet.js → customelement_bookmarklet.js
    View file
    File renamed without changes.
  7. ebidel created this gist May 7, 2014.
    1 change: 1 addition & 0 deletions bookmarklet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    javascript:(function(){var allElements=Array.prototype.slice.call(document.querySelectorAll('html /deep/ *'));allElements=allElements.filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).forEach(function(el,i){el.style.border='3px solid red';});})();
    8 changes: 8 additions & 0 deletions source.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    // Highlights all custom elements on the page.
    // To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html
    var allElements = Array.prototype.slice.call(document.querySelectorAll('html /deep/ *'));
    allElements = allElements.filter(function(el) {
    return el.localName.indexOf('-') != -1 || el.getAttribute('is');
    }).forEach(function(el, i) {
    el.style.border = '3px solid red';
    });