Eric Bidelman ebidel

## wcr_lazyload.html
<!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>

## mo_vs.proxy.js

<!--
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.

## ce_highlight.js
// 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() {

## fancy-tabs-demo.html
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>

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

## template_vs_innerhtml.html
<!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;

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

## index.html
<!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;

## deep_find_all_elements.js
/**
 * @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.

## ce.js
'use strict';

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

## smoothscroll.js
(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 = '';
  };
	<!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>

	<!--
	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.
	// 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() {
	<script src="https://unpkg.com/@webcomponents/custom-elements"></script>

	<style>
	body {
	margin: 0;
	}
	/* Style the element from the outside */
	/*
	fancy-tabs {
	margin-bottom: 32px;
	<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
	/**
	* @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.
	'use strict';

	customElements.define('x-hello', class extends HTMLElement {
	static get observedAttributes() {
	return ['name'];
	}
	constructor() {
	super();
	}
	attributeChangedCallback(attrName, oldVal, newVal) {
	(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 = '';
	};