vanilla-v0.js

(function() {
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
	var tmpl = document.createElement('template');
	tmpl.innerHTML = '<style>p {color:red; display: block;}</style><p><b>Foo</b> <content></content></p>';
	this.createShadowRoot()
		.appendChild(document.importNode(tmpl.content, true));
};
proto.attachedCallback = function() {
	return 'a';
};
proto.detachedCallback = function() {
	console.log('d');
};
proto.getFoo = function() {
	return 'f';
};
proto.setFoo = function(val) {
	if (val) {
		this.setAttribute('foo', '');
	} else {
		this.removeAttribute('foo');
	}
};
document.registerElement('test-element-1', {
	prototype: proto
});
})();

vanilla-v1.js

customElements.define('test-element-1', class extends HTMLElement {
	constructor() {
		super();
		let tmpl = document.createElement('template');
		tmpl.innerHTML = '<style>p {color:red; display: block;}</style><p><b>Foo</b> <slot></slot></p>';
		let shadowRoot = this.attachShadow({mode: 'open'});
		shadowRoot.appendChild(tmpl.content.cloneNode(true));
	}
	connectedCallback() {
		console.log('connected');
	}
	disconnectedCallback() {
		console.log('disconnected');
	}
	static get observedAttributes() {
		return ['foo'];
	}
	get foo() {
		return this.hasAttribute('foo');
	}
	set foo(val) {
		if (val) {
			this.setAttribute('foo', '');
		} else {
			this.removeAttribute('foo');
		}
	}
});