Scope styles even if the rendered value is not a TemplateResult.

package.json

@@ -35,7 +35,7 @@
   "devDependencies": {
     "@types/chai": "^4.1.0",
     "@types/mocha": "^5.2.0",
-    "@webcomponents/shadycss": "^1.5.2",
+    "@webcomponents/shadycss": "^1.8.0",
     "@webcomponents/webcomponentsjs": "^2.0.4",
     "chai": "^4.1.2",
     "clang-format": "^1.2.4",

src/env.d.ts

@@ -5,6 +5,10 @@ interface ShadyCSS {
   prepareTemplateDom(template: Element, elementName: string): void;
   prepareTemplateStyles(
       template: Element, elementName: string, typeExtension?: string): void;
+  ScopingShim: undefined|{
+    prepareAdoptedCssText(
+        cssTextArray: Array<string>, elementName: string): void;
+  };
 }
 
 interface ShadyDOM {

src/lib/shady-render.ts

@@ -24,6 +24,7 @@
  * Do not remove this comment; it keeps typedoc from misplacing the module
  * docs.
  */
+import {html} from '../lit-html.js';
 import {removeNodes} from './dom.js';
 import {insertNodeIntoTemplate, removeNodesFromTemplate} from './modify-template.js';
 import {RenderOptions} from './render-options.js';
@@ -248,7 +249,7 @@ export const render =
       const hasRendered = parts.has(container);
       const needsScoping = compatibleShadyCSSVersion &&
           container.nodeType === 11 /* Node.DOCUMENT_FRAGMENT_NODE */ &&
-          !!(container as ShadowRoot).host && result instanceof TemplateResult;
+          !!(container as ShadowRoot).host;
       // Handle first render to a scope specially...
       const firstScopeRender = needsScoping && !shadyRenderSet.has(scopeName);
       // On first scope render, render into a fragment; this cannot be a single
@@ -272,12 +273,18 @@ export const render =
       if (firstScopeRender) {
         const part = parts.get(renderContainer)!;
         parts.delete(renderContainer);
-        if (part.value instanceof TemplateInstance) {
-          prepareTemplateStyles(
-              renderContainer as DocumentFragment,
-              part.value.template,
-              scopeName);
-        }
+        // ShadyCSS might have style sheets (e.g. from `prepareAdoptedCssText`)
+        // that should apply to `renderContainer` even if the rendered value is
+        // not a TemplateInstance. However, it will only insert scoped styles
+        // into the document if `prepareTemplateStyles` has already been called
+        // for the given scope name. `prepareTemplateStyles` requires a
+        // template element (and the local wrapper requires a Template), so we
+        // create an empty one here to satisfy it.
+        const template = part.value instanceof TemplateInstance ?
+            part.value.template :
+            new Template(html``, document.createElement('template'));
+        prepareTemplateStyles(
+            renderContainer as DocumentFragment, template, scopeName);
         removeNodes(container, container.firstChild);
         container.appendChild(renderContainer);
         parts.set(container, part);
@@ -286,7 +293,7 @@ export const render =
       // initial render to this container.
       // This is needed whenever dynamic changes are made so it would be
       // safest to do every render; however, this would regress performance
-      // so we leave it up to the user to call `ShadyCSSS.styleElement`
+      // so we leave it up to the user to call `ShadyCSS.styleElement`
       // for dynamic changes.
       if (!hasRendered && needsScoping) {
         window.ShadyCSS!.styleElement((container as ShadowRoot).host);

src/test/lib/shady-render-scoping-shim_test.ts

@@ -0,0 +1,41 @@
+/**
+ * @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 {renderShadowRoot} from '../test-utils/shadow-root.js';
+
+const assert = chai.assert;
+
+suite('shady-render scoping shim', () => {
+  test('scoped styles are applied for non-TemplateResult values', function() {
+    if (typeof window.ShadyDOM === 'undefined' || !window.ShadyDOM.inUse) {
+      this.skip();
+      return;
+    }
+    if (typeof window.ShadyCSS === 'undefined' ||
+        window.ShadyCSS.nativeShadow ||
+        window.ShadyCSS.ScopingShim === undefined) {
+      this.skip();
+      return;
+    }
+    const container = document.createElement('scope-1');
+    window.ShadyCSS.ScopingShim.prepareAdoptedCssText(
+        [':host { border-top: 2px solid black; }'], 'scope-1');
+    document.body.appendChild(container);
+    renderShadowRoot(undefined, container);
+    assert.equal(
+        getComputedStyle(container).getPropertyValue('border-top-width').trim(),
+        '2px');
+    document.body.removeChild(container);
+  });
+});

src/test/test-utils/shadow-root.ts

@@ -12,12 +12,11 @@
  * http://polymer.github.io/PATENTS.txt
  */
 import {render} from '../../lib/shady-render.js';
-import {TemplateResult} from '../../lit-html.js';
 
 /**
  * A helper for creating a shadowRoot on an element.
  */
-export const renderShadowRoot = (result: TemplateResult, element: Element) => {
+export const renderShadowRoot = (result: unknown, element: Element) => {
   if (!element.shadowRoot) {
     element.attachShadow({mode: 'open'});
   }

test/index.html

@@ -32,6 +32,9 @@
         'shady-apply.html',
         'shady-apply.html?shadydom=true',
         'shady-apply.html?shadydom=true&shimcssproperties=true',
+        'shady-scoping-shim.html',
+        'shady-scoping-shim.html?shadydom=true',
+        'shady-scoping-shim.html?shadydom=true&shimcssproperties=true',
         'no-template.html',
       ]);
     </script>

test/shady-scoping-shim.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      if (location.search.match('shadydom')) {
+        window.ShadyDOM = {force: true};
+      }
+      if (location.search.match('shimcssproperties')) {
+        window.ShadyCSS = {shimcssproperties: true};
+      }
+    </script>
+    <script src="../node_modules/mocha/mocha.js"></script>
+    <script src="../node_modules/chai/chai.js"></script>
+    <script src="../node_modules/wct-mocha/wct-mocha.js"></script>
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+    <script src="../node_modules/@webcomponents/shadycss/scoping-shim.min.js"></script>
+  </head>
+  <body>
+    <script type="module" src="./lib/shady-render-scoping-shim_test.js"></script>
+  </body>
+</html>