feat: Add native support for custom elements.

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    ["env", {
+      "loose": true,
+      "exclude": ["transform-es2015-typeof-symbol"],
+      "targets": {
+        "browsers": ["last 2 versions", "IE >= 9"]
+      }
+    }]
+  ],
+  "plugins": [
+    "transform-object-rest-spread",
+    "transform-react-jsx"
+  ]
+}

src/dom/index.js

@@ -3,12 +3,18 @@ import options from '../options';
 
 
 /** Create an element with the given nodeName.
- *	@param {String} nodeName
+ *	@param {String|Function} nodeName
  *	@param {Boolean} [isSvg=false]	If `true`, creates an element within the SVG namespace.
  *	@returns {Element} node
  */
 export function createNode(nodeName, isSvg) {
-	let node = isSvg ? document.createElementNS('http://www.w3.org/2000/svg', nodeName) : document.createElement(nodeName);
+	let node;
+	if (typeof nodeName==='function') {
+		node = new nodeName();
+		nodeName = node.localName;
+	} else {
+		node = isSvg ? document.createElementNS('http://www.w3.org/2000/svg', nodeName) : document.createElement(nodeName);
+	}
 	node.normalizedNodeName = nodeName;
 	return node;
 }

src/vdom/diff.js

@@ -1,5 +1,5 @@
 import { ATTR_KEY } from '../constants';
-import { isSameNodeType, isNamedNode } from './index';
+import { isSameNodeName, isSameNodeType } from './index';
 import { buildComponentFromVNode } from './component';
 import { createNode, setAccessor } from '../dom/index';
 import { unmountComponent } from './component';
@@ -96,7 +96,7 @@ function idiff(dom, vnode, context, mountAll, componentRoot) {
 
 	// If the VNode represents a Component, perform a component diff:
 	let vnodeName = vnode.nodeName;
-	if (typeof vnodeName==='function') {
+	if (typeof vnodeName==='function' && !('nodeName' in vnodeName.prototype)) {
 		return buildComponentFromVNode(dom, vnode, context, mountAll);
 	}
 
@@ -106,8 +106,7 @@ function idiff(dom, vnode, context, mountAll, componentRoot) {
 
 
 	// If there's no existing element or it's the wrong type, create a new one:
-	vnodeName = String(vnodeName);
-	if (!dom || !isNamedNode(dom, vnodeName)) {
+	if (!dom || !isSameNodeName(dom, vnodeName) && dom.constructor !== vnodeName) {
 		out = createNode(vnodeName, isSvgMode);
 
 		if (dom) {

src/vdom/index.js

@@ -11,18 +11,18 @@ export function isSameNodeType(node, vnode, hydrating) {
 		return node.splitText!==undefined;
 	}
 	if (typeof vnode.nodeName==='string') {
-		return !node._componentConstructor && isNamedNode(node, vnode.nodeName);
+		return !node._componentConstructor && isSameNodeName(node, vnode.nodeName);
 	}
-	return hydrating || node._componentConstructor===vnode.nodeName;
+	return hydrating || node._componentConstructor===vnode.nodeName || node.constructor === vnode.nodeName;
 }
 
 
 /** Check if an Element has a given normalized name.
-*	@param {Element} node
-*	@param {String} nodeName
+ *	@param {Element} node
+ *	@param {mixed} nodeName
  */
-export function isNamedNode(node, nodeName) {
-	return node.normalizedNodeName===nodeName || node.nodeName.toLowerCase()===nodeName.toLowerCase();
+export function isSameNodeName(node, nodeName) {
+	return node.normalizedNodeName===nodeName || (nodeName.toLowerCase && node.nodeName.toLowerCase()===nodeName.toLowerCase());
 }
 
 

test/browser/custom-elements.js

@@ -0,0 +1,117 @@
+/** @jsx h */
+
+import { h, render } from '../../src/preact';
+
+window.customElements && describe('Custom elements', () => {
+	class CustomElement1 extends HTMLElement {}
+	class CustomElement2 extends HTMLElement {}
+	customElements.define('custom-element-1', CustomElement1);
+	customElements.define('custom-element-2', CustomElement2);
+
+	let refs, refsIndex, root, scratch;
+	const ref = () => e => e && (refs[refsIndex++] = e);
+	const tmp = jsx => (root = render(jsx, scratch, root));
+
+	beforeEach(() => {
+		refs = [];
+		refsIndex = 0;
+		scratch = document.createElement('div');
+		document.body.appendChild(scratch);
+	});
+
+	afterEach(() => {
+		scratch.parentNode.removeChild(scratch);
+	});
+
+	it('should not be replaced if they are the same', () => {
+		tmp(<CustomElement1 ref={ref()} />);
+		tmp(<CustomElement1 ref={ref()} />);
+		expect(refs[0]).to.equal(refs[1]);
+	});
+
+	it('should be replaced if they are different', () => {
+		tmp(<CustomElement1 ref={ref()} />);
+		tmp(<CustomElement2 ref={ref()} />);
+		expect(refs[0]).not.to.equal(refs[1]);
+	});
+
+	it('should replace keyed, different children', () => {
+		tmp(
+			<div>
+				<CustomElement1 key="0" ref={ref()} />
+				<CustomElement1 key="1" ref={ref()} />
+				<CustomElement1 key="2" ref={ref()} />
+			</div>
+		);
+		tmp(
+			<div>
+				<CustomElement2 key="0" ref={ref()} />
+				<CustomElement2 key="1" ref={ref()} />
+				<CustomElement2 key="2" ref={ref()} />
+			</div>
+		);
+		expect(refs[0]).to.not.equal(refs[3]);
+		expect(refs[1]).to.not.equal(refs[4]);
+		expect(refs[2]).to.not.equal(refs[5]);
+	});
+
+	it('should not replace keyed, same children', () => {
+		tmp(
+			<div>
+				<CustomElement1 key="0" ref={ref()} />
+				<CustomElement1 key="1" ref={ref()} />
+				<CustomElement1 key="2" ref={ref()} />
+			</div>
+		);
+		tmp(
+			<div>
+				<CustomElement1 key="0" ref={ref()} />
+				<CustomElement1 key="1" ref={ref()} />
+				<CustomElement1 key="2" ref={ref()} />
+			</div>
+		);
+		expect(refs[0]).to.equal(refs[3]);
+		expect(refs[1]).to.equal(refs[4]);
+		expect(refs[2]).to.equal(refs[5]);
+	});
+
+	it('should replace un-keyed (plucked), different children', () => {
+		tmp(
+			<div>
+				<CustomElement1 ref={ref()} />
+				<CustomElement1 ref={ref()} />
+				<CustomElement1 ref={ref()} />
+			</div>
+		);
+		tmp(
+			<div>
+				<CustomElement2 ref={ref()} />
+				<CustomElement2 ref={ref()} />
+				<CustomElement2 ref={ref()} />
+			</div>
+		);
+		expect(refs[0]).to.not.equal(refs[3]);
+		expect(refs[1]).to.not.equal(refs[4]);
+		expect(refs[2]).to.not.equal(refs[5]);
+	});
+
+	it('should not replace un-keyed (pluked), same children', () => {
+		tmp(
+			<div>
+				<CustomElement1 ref={ref()} />
+				<CustomElement1 ref={ref()} />
+				<CustomElement1 ref={ref()} />
+			</div>
+		);
+		tmp(
+			<div>
+				<CustomElement1 ref={ref()} />
+				<CustomElement1 ref={ref()} />
+				<CustomElement1 ref={ref()} />
+			</div>
+		);
+		expect(refs[0]).to.equal(refs[3]);
+		expect(refs[1]).to.equal(refs[4]);
+		expect(refs[2]).to.equal(refs[5]);
+	});
+});

test/custom-elements-es5-adapter.js

@@ -0,0 +1,18 @@
+/* eslint-disable */
+
+(function () {
+'use strict';
+
+(()=>{'use strict';if(!window.customElements)return;const a=window.HTMLElement,b=window.customElements.define,c=window.customElements.get,d=new Map,e=new Map;let f=!1,g=!1;window.HTMLElement=function(){if(!f){const j=d.get(this.constructor),k=c.call(window.customElements,j);g=!0;const l=new k;return l}f=!1;},window.HTMLElement.prototype=a.prototype;Object.defineProperty(window,'customElements',{value:window.customElements,configurable:!0,writable:!0}),Object.defineProperty(window.customElements,'define',{value:(j,k)=>{const l=k.prototype,m=class extends a{constructor(){super(),Object.setPrototypeOf(this,l),g||(f=!0,k.call(this)),g=!1;}},n=m.prototype;m.observedAttributes=k.observedAttributes,n.connectedCallback=l.connectedCallback,n.disconnectedCallback=l.disconnectedCallback,n.attributeChangedCallback=l.attributeChangedCallback,n.adoptedCallback=l.adoptedCallback,d.set(k,j),e.set(j,k),b.call(window.customElements,j,m);},configurable:!0,writable:!0}),Object.defineProperty(window.customElements,'get',{value:(j)=>e.get(j),configurable:!0,writable:!0});})();
+
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+}());

test/karma.conf.js

@@ -99,6 +99,10 @@ module.exports = function(config) {
 		customLaunchers: sauceLabs ? sauceLabsLaunchers : travisLaunchers,
 
 		files: [
+			// We can't load this up front because it's ES2015 and we need it only
+			// for certain tests that run under those conditions. We also can't load
+			// it via CDN because { included: false } won't work.
+			{ pattern: 'custom-elements-es5-adapter.js', included: false },
 			{ pattern: 'polyfills.js', watched: false },
 			{ pattern: '{browser,shared}/**.js', watched: false }
 		],

test/polyfills.js

@@ -3,3 +3,11 @@ import 'core-js/es6/map';
 import 'core-js/fn/array/fill';
 import 'core-js/fn/array/from';
 import 'core-js/fn/object/assign';
+
+// We add the ES5 adapter because src / test are converted to ES5 and native
+// custom elements uses native ES2015. Unfortunately. This needs to be done
+// sync so tests that assert this functionality will have the ES5 shim loaded
+// by the time they run.
+if (window.customElements) {
+	document.write('<script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>');
+}