Add 'connected' event for custom elements

src/customElements.ts

@@ -131,7 +131,7 @@ function getWidgetPropertyFromAttribute(attributeName: string, attributeValue: s
 	return [ propertyName, value ];
 }
 
-let customEventClass = global.CustomEvent;
+export let customEventClass = global.CustomEvent;
 
 if (typeof customEventClass !== 'function') {
 	const customEvent = function (event: string, params: any) {

src/registerCustomElement.ts

@@ -1,4 +1,5 @@
 import {
+	customEventClass,
 	CustomElementDescriptor,
 	handleAttributeChanged,
 	initializeElement
@@ -43,6 +44,9 @@ export function registerCustomElement(descriptorFactory: CustomElementDescriptor
 			if (!this._isAppended) {
 				this._appender();
 				this._isAppended = true;
+				this.dispatchEvent(new customEventClass('connected', {
+					bubbles: false
+				}));
 			}
 		}
 

tests/functional/registerCustomElement.ts

@@ -53,6 +53,21 @@ registerSuite('registerCustomElement', {
 					assert.isTrue(buttonClicked);
 				});
 		},
+		'custom elements emit event on connection'() {
+			if (skip) {
+				this.skip('not compatible with iOS 9.1 or Safari 9.1');
+			}
+			return this.remote
+				.get((<any> require).toUrl('./support/registerCustomElement.html'))
+				.setFindTimeout(1000)
+				.findByCssSelector('#testButton > button')
+				.click()
+				.end()
+				.execute('return window.connectedEvent')
+				.then((connectedEvent: boolean) => {
+					assert.isTrue(connectedEvent);
+				});
+		},
 		'updates the correct instance when multiple or the same custom elements are used'() {
 			if (skip) {
 				this.skip('not compatible with iOS 9.1 or Safari 9.1');

tests/functional/support/registerCustomElement.html

@@ -20,6 +20,7 @@
 <script>
 	window.buttonClicked = false;
 	window.ready = false;
+	window.connectedEvent = false;
 
 	require.config({
 		packages: [
@@ -28,6 +29,10 @@
 		]
 	});
 
+	document.getElementById('testButton').addEventListener('connected', function() {
+		window.connectedEvent = true;
+	});
+
 	require(['./registerCustomElement'], function() {
 		window.ready = true;