Adds static get styles()

demo/lit-element.html

@@ -19,9 +19,13 @@
     <ts-element message="Yo" more-info="person"></ts-element>
 
   <script type="module">
-    import { LitElement, html } from '../lit-element.js';
+    import { LitElement, html, css } from '../lit-element.js';
 
     class Inner extends LitElement {
+
+      static get styles() {
+        return [css`:host { color: green; }`];
+      }
       render() {
         return html`Hello world`;
       }
@@ -34,23 +38,13 @@
       static get properties() {
         return {
           nug: {},
-          zot: {},
           foo: {},
           bar: {},
           whales: {type: Number},
           fooBar: {converter: {fromAttribute: parseInt, toAttribute: (value) => value + '-attr'}, reflect: true}
         }
       }
 
-      // a custom getter/setter can be created to customize property processing
-      get zot() { return this.getAttribute('zot'); }
-
-      set zot(value) {
-        this.setAttribute('zot', value);
-        this.invalidate();
-      }
-
-
       constructor() {
         super();
         this.foo = 'foo';
@@ -64,6 +58,10 @@
         });
       }
 
+      static get styles() {
+        return [css`h4 { color: orange;} `];
+      }
+
       render() {
         const {foo, bar, whales, fooBar, nug} = this;
         return html`

src/lib/css-tag.ts

@@ -0,0 +1,61 @@
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+export const supportsAdoptedStyleSheets = ('adoptedStyleSheets' in Document.prototype);
+
+interface ConstructableStyleSheet extends CSSStyleSheet {
+  replaceSync(cssText: string): void;
+  replace(cssText: string): Promise<unknown>;
+}
+
+class CSSLiteral {
+
+  value: string;
+
+  constructor(value: string) {
+    this.value = value.toString();
+  }
+
+  toString() {
+    return this.value;
+  }
+}
+
+const cssLiteralValue = (value: CSSLiteral) => {
+  if (value instanceof CSSLiteral) {
+    return value.value;
+  } else {
+    throw new Error(
+        `Non-literal value passed to 'css' function: ${value}.`
+    );
+  }
+};
+
+export type CSSStyleSheetOrCssText = {
+  cssText?: CSSLiteral,
+  styleSheet?: ConstructableStyleSheet}
+;
+
+export const css = (strings: TemplateStringsArray, ...values: CSSLiteral[]): CSSStyleSheetOrCssText => {
+  const cssText = values.reduce((acc, v, idx) =>
+      acc + cssLiteralValue(v) + strings[idx + 1], strings[0]);
+  const result: CSSStyleSheetOrCssText = {};
+  if (supportsAdoptedStyleSheets) {
+    result.styleSheet = new CSSStyleSheet() as ConstructableStyleSheet;
+    result.styleSheet.replaceSync(cssText);
+  } else {
+    result.cssText = new CSSLiteral(cssText);
+  }
+  return result;
+};
+
+export const cssLiteral = (strings: TemplateStringsArray, ...values: any[]) => {
+  return new CSSLiteral(values.reduce((acc, v, idx) =>
+      acc + cssLiteralValue(v) + strings[idx + 1], strings[0]));
+};

src/lib/updating-element.ts

@@ -11,6 +11,19 @@
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
+import {supportsAdoptedStyleSheets, CSSStyleSheetOrCssText} from './css-tag.js';
+export * from './css-tag.js';
+
+// Augment existing types with bleeding edge API.
+declare global {
+  interface ShadyCSS {
+    prepareAdoptedCssText(cssText: string[], name: string): void;
+  }
+
+  interface ShadowRoot {
+    adoptedStyleSheets: CSSStyleSheet[];
+  }
+}
 
 /**
  * Returns the property descriptor for a property on this prototype by walking
@@ -215,6 +228,14 @@ export abstract class UpdatingElement extends HTMLElement {
 
   static properties: PropertyDeclarations = {};
 
+  /**
+   * Array of styles to apply to the element. The styles should be defined
+   * using the `css` tag function.
+   */
+  static get styles(): CSSStyleSheetOrCssText[] {
+    return [];
+  }
+
   /**
    * Returns a list of attributes corresponding to the registered properties.
    */
@@ -462,7 +483,39 @@ export abstract class UpdatingElement extends HTMLElement {
    * @returns {Element|DocumentFragment} Returns a node into which to render.
    */
   protected createRenderRoot(): Element|ShadowRoot {
-    return this.attachShadow({mode : 'open'});
+    const shadowRoot = this.attachShadow({mode : 'open'});
+    this.createRenderRootStyles(shadowRoot);
+    return shadowRoot;
+  }
+
+  /**
+   * Applies styling to the element shadowRoot using the `static get styles`
+   * property. Styling will apply using `shadowRoot.adoptedStyleSheets` where
+   * available and will fallback otherwise.
+   */
+  protected createRenderRootStyles(shadowRoot: ShadowRoot) {
+    const styles = (this.constructor as typeof UpdatingElement).styles;
+    // There are three separate cases here based on Shadow DOM support:
+    // (1) shadowRoot polyfilled: use ShadyCSS
+    // (2) shadowRoot.adoptedStyleSheets available: use it.
+    // (3) shadowRoot.adoptedStyleSheets polyfilled: add styles after rendering.
+    if (window.ShadyCSS !== undefined && !(window.ShadyCSS as any).nativeShadow) {
+      window.ShadyCSS.prepareAdoptedCssText(styles.map((s) => s.cssText!.toString()), this.localName);
+    } else if (supportsAdoptedStyleSheets) {
+      shadowRoot.adoptedStyleSheets = styles.map((s) => s.styleSheet!);
+    } else {
+      // Ensure styling comes after rendering so styles are *after* all other rendered content.
+      // This matches the spec'd behavior of `adoptedStyleSheets`.
+      // Ensure an updated is requested and then render styling directly after the update.
+      this.requestUpdate();
+      this._updatePromise.then(() => {
+        styles.forEach((s) => {
+          const style = document.createElement('style');
+          style.textContent = s.cssText!.toString();
+          shadowRoot.appendChild(style);
+        });
+      });
+    }
   }
 
   /**

src/test/lit-element_styling_test.ts

@@ -16,6 +16,7 @@ import '@webcomponents/shadycss/apply-shim.min.js';
 
 import {
   html as htmlWithStyles,
+  css, cssLiteral,
   LitElement,
 } from '../lit-element.js';
 
@@ -330,6 +331,122 @@ suite('Styling', () => {
       });
 });
 
+suite('Static get styles', () => {
+  let container: HTMLElement;
+
+  setup(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  teardown(() => {
+    if (container && container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+  });
+
+  test('content shadowRoot is styled via static get styles', async () => {
+    const name = generateElementName();
+    customElements.define(name, class extends LitElement {
+
+      static get styles() {
+        return [css`div {
+            border: 2px solid blue;
+          }`, css`span {
+            display: block;
+            border: 3px solid blue;
+          }`];
+      }
+
+      render() {
+        return htmlWithStyles`
+        <div>Testing1</div>
+        <span>Testing2</span>`;
+      }
+    });
+    const el = document.createElement(name);
+    container.appendChild(el);
+    await (el as LitElement).updateComplete;
+    const div = el.shadowRoot!.querySelector('div');
+    assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(), '2px');
+    const span = el.shadowRoot!.querySelector('span');
+    assert.equal(getComputedStyleValue(span!, 'border-top-width').trim(), '3px');
+  });
+
+  test('static get styles allows `cssLiteral` values', async () => {
+    const name = generateElementName();
+    customElements.define(name, class extends LitElement {
+
+      static get styles() {
+        return [css`div {
+            border: ${cssLiteral`2px solid blue`};
+          }`, css`span {
+            display: block;
+            border: ${cssLiteral`3px solid blue`};
+          }`];
+      }
+
+      render() {
+        return htmlWithStyles`
+        <div>Testing1</div>
+        <span>Testing2</span>`;
+      }
+    });
+    const el = document.createElement(name);
+    container.appendChild(el);
+    await (el as LitElement).updateComplete;
+    const div = el.shadowRoot!.querySelector('div');
+    assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(), '2px');
+    const span = el.shadowRoot!.querySelector('span');
+    assert.equal(getComputedStyleValue(span!, 'border-top-width').trim(), '3px');
+  });
+
+  test('`css` get styles throws when unsafe values are used', async () => {
+    assert.throws(() => {
+      css`div { border: ${`2px solid blue;` as any}}`;
+    });
+  });
+
+  test('styles in render compose with `static get styles`', async () => {
+    const name = generateElementName();
+    customElements.define(name, class extends LitElement {
+
+      static get styles() {
+        return [css`div {
+            border: 2px solid blue;
+          }`, css`span {
+            display: block;
+            border: 3px solid blue;
+          }`];
+      }
+
+      render() {
+        return htmlWithStyles`
+        <style>
+          div {
+            padding: 4px;
+          }
+          span {
+            display: block;
+            border: 4px solid blue;
+          }
+        </style>
+        <div>Testing1</div>
+        <span>Testing2</span>`;
+      }
+    });
+    const el = document.createElement(name);
+    container.appendChild(el);
+    await (el as LitElement).updateComplete;
+    const div = el.shadowRoot!.querySelector('div');
+    assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(), '2px');
+    assert.equal(getComputedStyleValue(div!, 'padding-top').trim(), '4px');
+    const span = el.shadowRoot!.querySelector('span');
+    assert.equal(getComputedStyleValue(span!, 'border-top-width').trim(), '3px');
+  });
+
+});
+
 suite('ShadyDOM', () => {
   let container: HTMLElement;