Scott J. Miles sjmiles

Case 1: intrinsic ShadowDOM

// markup
<x-foo>My Content</x-foo>

// innerHTML should only ever reflect light dom, node contents 
// are interchangeable without regard to the node itself
xfoo.innerHTML === ‘My Content’

// outerHTML does not reflect ShadowDOM, as (if it exists) it’s

	ready: function() {
	this.resizeListeners = [];
	if (!this.fire('request-resize-advice', {sender: this, ok: false}, this.parentNode).ok) {
	console.log('using window resize');
	window.addEventListener('resize', this.resize.bind(this));
	} else {
	console.log('using ancestor resize');
	}
	},
	requestResizeAdvice: function(event, detail) {

	<!doctype html>
	<html>
	<head>
	<title></title>
	<style>
	html, body {
	height: 100%;
	}
	body {
	font-family: 'Helvetica Neue', Roboto, Arial, Helvetica, sans-serif;

	> object
	Object {touch-action: "none"}

	> Object.getOwnPropertyDescriptor(object, 'touch-action')
	Object {value: "none", writable: true, enumerable: true, configurable: true}

	> o = Object.create(object)
	Object {} <-- where's my proto?

	> Object.create({'touch-action': 'none'})

	<element name="google-plusone">
	<script>
	Polymer.register(this, {
	ready: function() {
	addInstance(this);
	},
	plusOneReady: function() {
	// do stuff
	}
	});

	<!-- bad thing to be avoided -->

	<element name="x-foo">
	<script>
	rarelyUsedMethod: function() {
	missingDependency.doWork();
	}
	</script>
	</element>

	bind: function(inName, inModel, inPath) {
	if (inModel.isToolkitElement) {
	Toolkit.bindProperties(this, inName, inModel, inPath);
	} else {
	HTMLElement.prototype.bind.apply(this, arguments);
	}
	}

	<!DOCTYPE html>
	<!--
	Copyright 2013 The Toolkitchen Authors. All rights reserved.
	Use of this source code is governed by a BSD-style
	license that can be found in the LICENSE file.
	-->
	<html>
	<head>
	<title></title>
	<meta charset="UTF-8">