Add ShadyCSS support

package-lock.json

@@ -407,6 +407,12 @@
       "integrity": "sha512-BtnVvNBTyB3f519KW/rSSXsYe2Nz6pLhMyLMFTS/t4IsqWRsWd5IZNqmY+Ic0a5XbD1B7anKaIWEaCM5b65W0w==",
       "dev": true
     },
+    "@webcomponents/shadydom": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@webcomponents/shadydom/-/shadydom-1.0.11.tgz",
+      "integrity": "sha512-5kRpWfGK7V6J1neoqMmKO5uP/yXaDb3waFpVcHOoYPhevltfPYQlJbGETlk6+IuGZ2fEr/Bp6AUbOZMDEFLPTw==",
+      "dev": true
+    },
     "@webcomponents/template": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@webcomponents/template/-/template-1.2.2.tgz",

package.json

@@ -31,6 +31,8 @@
   "devDependencies": {
     "@types/chai": "^4.1.0",
     "@types/mocha": "^2.2.46",
+    "@webcomponents/shadycss": "^1.1.0",
+    "@webcomponents/shadydom": "^1.0.11",
     "@webcomponents/template": "^1.2.2",
     "babel-polyfill": "^6.26.0",
     "chai": "^4.1.2",

src/lib/shady-render.ts

@@ -0,0 +1,52 @@
+/**
+ * @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
+ */
+
+import {render as baseRender, Template, templateCaches, TemplateResult} from '../lit-html.js';
+
+export {html, svg, TemplateResult} from '../lit-html.js';
+
+declare global {
+  interface Window {
+    ShadyCSS: any;
+  }
+}
+
+const shadyTemplateFactory = (scopeName: string) =>
+    (result: TemplateResult) => {
+      const cacheKey = `${result.type}--${scopeName}`;
+      let templateCache = templateCaches.get(cacheKey);
+      if (templateCache === undefined) {
+        templateCache = new Map<TemplateStringsArray, Template>();
+        templateCaches.set(cacheKey, templateCache);
+      }
+      let template = templateCache.get(result.strings);
+      if (template === undefined) {
+        const element = result.getTemplateElement();
+
+        if (typeof window.ShadyCSS === 'object') {
+          window.ShadyCSS.prepareTemplate(element, scopeName);
+        }
+
+        template = new Template(result, element);
+        templateCache.set(result.strings, template);
+      }
+      return template;
+    };
+
+export function render(
+    result: TemplateResult,
+    container: Element|DocumentFragment,
+    scopeName: string) {
+  return baseRender(result, container, shadyTemplateFactory(scopeName));
+}

src/lit-html.ts

@@ -15,7 +15,7 @@
 // The first argument to JS template tags retain identity across multiple
 // calls to a tag for the same literal, so we can cache work done per literal
 // in a Map.
-const templateCaches = new Map<string, Map<TemplateStringsArray, Template>>();
+export const templateCaches = new Map<string, Map<TemplateStringsArray, Template>>();
 
 /**
  * Interprets a template literal as an HTML template that can efficiently
@@ -103,7 +103,7 @@ export function defaultTemplateFactory(result: TemplateResult) {
   }
   let template = templateCache.get(result.strings);
   if (template === undefined) {
-    template = new Template(result);
+    template = new Template(result, result.getTemplateElement());
     templateCache.set(result.strings, template);
   }
   return template;
@@ -218,8 +218,8 @@ export class Template {
   parts: TemplatePart[] = [];
   element: HTMLTemplateElement;
 
-  constructor(result: TemplateResult) {
-    this.element = result.getTemplateElement();
+  constructor(result: TemplateResult, element: HTMLTemplateElement) {
+    this.element = element;
     const content = this.element.content;
     // Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null
     const walker = document.createTreeWalker(

src/test/lib/shady-render_test.ts

@@ -0,0 +1,42 @@
+/**
+ * @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
+ */
+
+import {html, render} from '../../lib/shady-render.js';
+
+
+/// <reference path="../../node_modules/@types/mocha/index.d.ts" />
+/// <reference path="../../node_modules/@types/chai/index.d.ts" />
+
+const assert = chai.assert;
+
+suite('shady-render', () => {
+
+  test('prepares templates with ShadyCSS', () => {
+    const container = document.createElement('div');
+    render(html`
+      <style>
+        div {
+          color: red;
+        }
+      </style>
+      <div>Testing...</div>
+    `, container, 'x-foo');
+    assert.equal(container.children.length, 1);
+    const div = container.firstElementChild!;
+    assert.equal(div.getAttribute('class'), `style-scope x-foo`);
+    const style = document.querySelector('style[scope="x-foo"]');
+    assert.isNotNull(style);
+  });
+
+});

src/test/lit-html_test.ts

@@ -15,7 +15,7 @@
 /// <reference path="../../node_modules/@types/mocha/index.d.ts" />
 /// <reference path="../../node_modules/@types/chai/index.d.ts" />
 
-import {AttributePart, defaultPartCallback, html, NodePart, Part, render, svg, TemplateInstance, TemplatePart, TemplateResult, defaultTemplateFactory} from '../lit-html.js';
+import {AttributePart, defaultPartCallback, defaultTemplateFactory, html, NodePart, Part, render, svg, TemplateInstance, TemplatePart, TemplateResult} from '../lit-html.js';
 
 const assert = chai.assert;
 
@@ -227,7 +227,8 @@ suite('lit-html', () => {
       });
 
       const testSkipForTemplatePolyfill =
-          ((HTMLTemplateElement as any).decorate != null) ?
+          ((HTMLTemplateElement as any).decorate != null ||
+            (window as any).ShadyDOM && (window as any).ShadyDOM.inUse) ?
           test.skip :
           test;
 

test/index.html

@@ -13,5 +13,10 @@
     <script type="module" src="./lib/unsafe-html_test.js"></script>
     <script type="module" src="./lib/async-append_test.js"></script>
     <script type="module" src="./lib/async-replace_test.js"></script>
+    <script>
+      WCT.loadSuites([
+        'shady.html',
+      ]);
+    </script>
   </body>
 </html>

test/shady.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      window.ShadyDOM = {force: true};
+    </script>
+    <script src="../node_modules/wct-browser-legacy/browser.js"></script>
+    <script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
+    <script src="../node_modules/@webcomponents/shadycss/scoping-shim.min.js"></script>
+    <script src="../node_modules/@webcomponents/template/template.js"></script>
+    <script src="../node_modules/babel-polyfill/dist/polyfill.min.js"></script>
+  </head>
+  <body>
+    <script type="module" src="./lib/shady-render_test.js"></script>
+  </body>
+</html>