webcomponents.js: Add typings for Element.createShadowRoot (#10330)

* webcomponents.js: Add typings for Element.createShadowRoot

createShadowRoot is deprecated in the official Shadow DOM spec,
but is the way to attach a shadow root in the current released
version of webcomponents.js.

* webcomponents.js: remove spurious extra line

* webcomponents.js: remove readonly modifier

Not supported until TS2.

* webcomponents.js: add Element.shadowRoot property

webcomponents.js/webcomponents.js-tests.ts

@@ -36,6 +36,15 @@ window.HTMLImports.whenReady(() => {
 
 document.querySelectorAll(`link[type=${window.HTMLImports.IMPORT_LINK_TYPE}`);
 
+/*
+ * Shadow DOM
+ */
+
+var shadow = xFoo.createShadowRoot();
+xFoo.shadowRoot;
+shadow.innerHTML;
+shadow.host;
+
 /*
  * Web Components
  */

webcomponents.js/webcomponents.js.d.ts

@@ -31,6 +31,11 @@ declare namespace webcomponents {
         whenReady(callback: () => void): void;
     }
 
+    export interface ShadowRootPolyfill extends DocumentFragment {
+        innerHTML: string;
+        host: Element;
+    }
+
     export interface Polyfill {
         flags: any;
     }
@@ -41,6 +46,11 @@ declare module "webcomponents.js" {
     export = webcomponents;
 }
 
+interface Element {
+    createShadowRoot(): webcomponents.ShadowRootPolyfill;
+    shadowRoot?: webcomponents.ShadowRootPolyfill;
+}
+
 interface Document {
     registerElement(name: string, prototype: webcomponents.CustomElementInit): webcomponents.CustomElementConstructor;
 }