diff --git a/CHANGELOG.md b/CHANGELOG.md index bf527991..5deabdd6 100644 --- a/CHANGELOG.md +++ b/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). diff --git a/src/lit-element.ts b/src/lit-element.ts index 20f3740c..96cddb05 100644 --- a/src/lit-element.ts +++ b/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|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); } /** diff --git a/src/test/lit-element_test.ts b/src/test/lit-element_test.ts index 2405b5cd..d437da14 100644 --- a/src/test/lit-element_test.ts +++ b/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); + } + ); });