ebidel’s gists

ebidel / template_vs_innerhtml.html

Last active October 7, 2019 09:50

Fastest way to create shadow DOM (.innerHTML vs. <template>)

	<!doctype html>
	<html>
	<head>
	<title>What's the fastest way to create shadow DOM</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	padding: 3em;
	font-family: "Roboto", sans-serif;

ebidel / fancy-tabs-demo.html

Last active February 18, 2025 15:38

Fancy tabs web component - shadow dom v1, custom elements v1, full a11y

	<script src="https://unpkg.com/@webcomponents/custom-elements"></script>

	<style>
	body {
	margin: 0;
	}
	/* Style the element from the outside */
	/*
	fancy-tabs {
	margin-bottom: 32px;

ebidel / ce_highlight.js

Last active July 5, 2018 20:14

Continuous custom element higlighter

	// Continuously higlights the custom elements on the page. This is useful
	// if new custom elements are lazy loaded later on or you have a SPA
	// that uses other elements.

	// CE finding code from: https://gist.github.com/ebidel/4bdbe9db55d8a775d0a4

	(function() {
	let cache = [];

	function highlightCustomElements() {

ebidel / mo_vs.proxy.js

Last active December 31, 2023 12:24

MutationObserver vs. Proxy to detect .textContent changes


	<!--
	This demo shows two ways to detect changes to a DOM node `.textContent`, one
	using a `MutationObserver` and the other using an ES2015 `Proxy`.

	From testing, a `Proxy` appears to be 6-8x faster than using a MO in Chrome 50.

	Update: removing the `Proxy` altogether speeds up the MO to be inline with the Proxy.
	This has something to do with how the browser queues/prioritizes Proxies over MO.

ebidel / wcr_lazyload.html

Created January 21, 2016 18:56

How to use the WebComponentsReady when lazy loading the webcomponents.js polyfills (http://jsbin.com/dihasa/edit?html,output)

	<!doctype html>
	<html>
	<head>
	<base href="https://polygit.org/components/">
	<!-- <script src="webcomponentsjs/webcomponents-lite.min.js"></script> -->
	<link rel="import" href="paper-input/paper-input.html">
	<link rel="import" href="paper-button/paper-button.html">
	</head>
	<body>

ebidel / firstpaint.js

Last active January 15, 2018 07:55

Helper to print first paint time in Chrome

	(function() {
	'use strict';

	// First paint perf.
	if (window.chrome && window.chrome.loadTimes) {
	const getFP = function() {
	let load = chrome.loadTimes();
	let fp = (load.firstPaintTime - load.startLoadTime) * 1000;
	return Math.round(fp);
	};

ebidel / load_import.js

Last active November 11, 2017 00:13

Helper method to imperatively load an (async) HTML import

	/**
	* Convenience for dynamically loading an HTML Import.
	*
	* This method creates a new `<link rel="import">` element with
	* the provided URL and appends it to the document to start loading. By default,
	* it loads async to not blocking rendering.
	*
	* @param {string} href The URL to load.
	* @param {boolean} opt_async True if import should be async. Default: true.
	* @return {Promise(HTMLLinkElement, Error)} A promise that resolves with the

ebidel / unused-html-imports-bookmarket.js

Last active March 16, 2020 03:45

Bookmarklet to help prune unnecessary HTML Imports loaded on a page.

javascript:(function(){'use strict';var _temporalUndefined={};function _temporalAssertDefined(val,name,undef){if(val===undef){throw new ReferenceError(name+' is not defined - temporal dead zone');}return true;}(function(){'use strict';var els=_temporalUndefined;var allCustomElements=_temporalUndefined;var polymerRegisteredElements=_temporalUndefined;var diff=_temporalUndefined;function isCustomEl(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}els=[].slice.call(document.querySelectorAll('html /deep/ *')).filter(function(el){return isCustomEl(el);}).map(function(el){return el.getAttribute('is')||el.localName;});allCustomElements=new Set(_temporalAssertDefined(els,'els',_temporalUndefined)&&els);polymerRegisteredElements=Polymer.telemetry.registrations.map(function(el){return el.is;}).filter(function(name){var blacklist=_temporalUndefined;blacklist=['dom-template','array-selector','custom-style'];return(_temporalAssertDefined(blacklist,'blacklist',_temporalUndefined)&&blacklist).indexOf(name)==

ebidel / dom-property-watcher.js

Created September 12, 2015 17:01

DOM property watcher using ES6 proxies.

	// Watch accesses/sets on a DOM element property.
	function watchPropsOn(el) {
	return new Proxy(el, {
	get(target, propKey, receiver) {
	//return Reflect.get(target, propKey, receiver);
	console.log('get', propKey);
	return el[propKey];
	},
	set(target, propKey, value, receiver) {
	console.log('set', propKey, value);

ebidel / polymer-perf-bookmarklet.js

Last active May 1, 2021 15:42

Polymer performance numbers bookmarklet

javascript:(function(){(function printStats(){var loadTimes=window.chrome.loadTimes();firstPaint=loadTimes.firstPaintTime*1000;firstPaintTime=firstPaint-(loadTimes.startLoadTime*1000);console.info('First paint took',firstPaintTime,'ms');console.info('Load took',performance.timing.loadEventStart-performance.timing.navigationStart,'ms');var instances=0;if(parseFloat(Polymer.version)<1){instances=[].slice.call(document.querySelectorAll('html /deep/ *')).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).length;}else{instances=Polymer.telemetry.instanceCount;}console.info('Custom element instances:',instances);var reflectCount=0;if(Polymer.telemetry){console.info('=== Properties set to reflectToAttribute ===');Polymer.telemetry.registrations.forEach(function(el){for(var prop in el.properties){if(el.properties[prop].reflectToAttribute){console.log(el.is+'.'+prop);reflectCount++;}}});}else{console.info('=== Properties set to reflect ===');Polymer.elements.forEach(function(el){for(var

Eric Bidelman ebidel