Eric Bidelman ebidel

Distinguished Engineer @ Yahoo. xLyft. xGoogle, Chrome team. ❤️ all things web.

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 / 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 / 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 / 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 / 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 / demo_polymer.html

Last active November 24, 2017 10:11

Custom Element v0 + Shadow DOM v0 example. Vanilla (webcomponents.js polyfill) vs. Polymer.

	<html>
	<head>
	<title>Polymer example</title>
	<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
	<script>
	// Enable native SD if available and lazy register.
	window.Polymer = window.Polymer \|\| {
	dom: 'shadow',
	lazyRegister: 'max',
	useNativeCSSProperties: true

ebidel / index.html

Created September 16, 2016 03:06

<card-swiper> custom element - demonstrates the usage of the v1 polyfills.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
	<title>How to use the Custom Elements v1 + Shadow DOM v1 polyfills</title>

	<style>
	body {
	font-family: sans-serif;

ebidel / deep_find_all_elements.js

Last active September 22, 2017 18:45

Find all nodes used on the page, deep within v0 and v1 shadow DOM.

	/**
	* @author ebidel@ (Eric Bidelman)
	* License Apache-2.0
	*/

	/**
	* Convenience method finding all the DOM child nodes of a parent,
	* includibg those within shadow roots. By default, all children
	* under `<body>` will be returned. The parent node can be overridden
	* by passing the `selector` param.

ebidel / ce.js

Created February 24, 2017 20:06

Custom elements bootup perf

	'use strict';

	customElements.define('x-hello', class extends HTMLElement {
	static get observedAttributes() {
	return ['name'];
	}
	constructor() {
	super();
	}
	attributeChangedCallback(attrName, oldVal, newVal) {

ebidel / smoothscroll.js

Last active January 17, 2019 02:22

Smooth scroll page

	(function() {
	const scroller = document.scrollingElement \|\| document.body;

	// Smooth scrolls to the bottom of the page.
	window.smoothScrollPage = (y = scroller.scrollHeight) => {
	scroller.style.scrollBehavior = 'smooth';
	scroller.scrollTop = y;
	scroller.style.scrollBehavior = '';
	};