Adds shadowRootOptions feature

This is a slightly simpler alternative for customizing shadow root options than implementing `createRenderRoot`. Fixes #1147.

Author: Steven Orvell

CHANGELOG.md

@@ -19,6 +19,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Unreleased
 
+### Added
+* Adds a `static shadowRootOptions` property for specifying shadow root options. This is a slightly simpler alternative to implementing a custom `createRenderRoot` method [#1147](https://github.com/Polymer/lit-element/issues/1147).
+
 ### Fixed
 * Fixes an issue with `queryAssignedNodes` when applying a selector on a slot that included text nodes on older browsers not supporting Element.matches [#1088](https://github.com/Polymer/lit-element/issues/1088).
 

src/lit-element.ts

@@ -132,6 +132,8 @@ export class LitElement extends UpdatingElement {
    */
   static styles?: CSSResultOrNative|CSSResultArray;
 
+  static shadowRootOptions: ShadowRootInit = { mode: "open" };
+
   private static _styles: Array<CSSResultOrNative|CSSResult>|undefined;
 
   /**
@@ -236,7 +238,8 @@ export class LitElement extends UpdatingElement {
    * @returns {Element|DocumentFragment} Returns a node into which to render.
    */
   protected createRenderRoot(): Element|ShadowRoot {
-    return this.attachShadow({mode: 'open'});
+    return this.attachShadow(
+      (this.constructor as typeof LitElement).shadowRootOptions);
   }
 
   /**

src/test/lit-element_test.ts

@@ -289,4 +289,18 @@ suite('LitElement', () => {
             a,
             'testDom should be a child of the component');
       });
+
+  (window.ShadyDOM && window.ShadyDOM.inUse ? test.skip : test)(
+      "can customize shadowRootOptions",
+      async () => {
+        class A extends LitElement {
+          static shadowRootOptions: ShadowRootInit = { mode: "closed" };
+        }
+        customElements.define(generateElementName(), A);
+        const a = new A();
+        container.appendChild(a);
+        await a.updateComplete;
+        assert.equal(a.shadowRoot, undefined);
+      }
+    );
 });