From e012497f221551dee9c311d2f61d6c0c4498d434 Mon Sep 17 00:00:00 2001
From: Anthony Gubler <agubler@sitepen.com>
Date: Wed, 8 Nov 2017 10:54:02 +0000
Subject: [PATCH] Add connected event for custom elements

---
 src/customElements.ts                             |  2 +-
 src/registerCustomElement.ts                      |  4 ++++
 tests/functional/registerCustomElement.ts         | 15 +++++++++++++++
 .../functional/support/registerCustomElement.html |  5 +++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/customElements.ts b/src/customElements.ts
index 0d82b4ed..4cb354ed 100644
--- a/src/customElements.ts
+++ b/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) {
diff --git a/src/registerCustomElement.ts b/src/registerCustomElement.ts
index 8c8521e9..bfc2dbf5 100644
--- a/src/registerCustomElement.ts
+++ b/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
+				}));
 			}
 		}
 
diff --git a/tests/functional/registerCustomElement.ts b/tests/functional/registerCustomElement.ts
index 851c2b03..4a990ba6 100644
--- a/tests/functional/registerCustomElement.ts
+++ b/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');
diff --git a/tests/functional/support/registerCustomElement.html b/tests/functional/support/registerCustomElement.html
index 75362688..8f8f5984 100644
--- a/tests/functional/support/registerCustomElement.html
+++ b/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;