Primitive shadow parts support

This supports basic patterns of styling parts whenever a node is inserted into a
shadow root. It also adds and tests a disableShadowParts ShadyCSS setting.

Support for more kinds of mutations, exportparts, CSS custom properties are
coming in follow up PRs.

Author: aomarks

packages/shadycss/externs/shadycss-externs.js

@@ -9,13 +9,15 @@
  * styleDocument: function(Object<string, string>=),
  * flushCustomStyles: function(),
  * getComputedStyleValue: function(!Element, string): string,
+ * onInsertBefore: function(!HTMLElement, !HTMLElement, ?HTMLElement): void,
  * ScopingShim: (Object|undefined),
  * ApplyShim: (Object|undefined),
  * CustomStyleInterface: (Object|undefined),
  * nativeCss: boolean,
  * nativeShadow: boolean,
  * cssBuild: (string | undefined),
  * disableRuntime: boolean,
+ * disableShadowParts: (boolean | undefined),
  * }}
  */
 let ShadyCSSInterface; //eslint-disable-line no-unused-vars
@@ -26,6 +28,7 @@ let ShadyCSSInterface; //eslint-disable-line no-unused-vars
  * shimshadow: (boolean | undefined),
  * cssBuild: (string | undefined),
  * disableRuntime: (boolean | undefined),
+ * disableShadowParts: (boolean | undefined),
  * }}
  */
 let ShadyCSSOptions; //eslint-disable-line no-unused-vars
@@ -63,4 +66,4 @@ HTMLTemplateElement.prototype._style;
 /**
  * @type {string | undefined}
  */
-DOMTokenList.prototype.value;
+DOMTokenList.prototype.value;

packages/shadycss/src/scoping-shim.js

@@ -23,6 +23,8 @@ import templateMap from './template-map.js';
 import * as ApplyShimUtils from './apply-shim-utils.js';
 import {updateNativeProperties, detectMixin} from './common-utils.js';
 import {CustomStyleInterfaceInterface, CustomStyleProvider} from './custom-style-interface.js'; // eslint-disable-line no-unused-vars
+import * as shadowParts from './shadow-parts.js';
+import {disableShadowParts} from './style-settings.js';
 
 /** @type {!Object<string, string>} */
 const adoptedCssTextMap = {};
@@ -275,6 +277,21 @@ export default class ScopingShim {
     // sort ast ordering for document
     this._documentOwnerStyleInfo.styleRules['rules'] = styles.map(s => StyleUtil.rulesForStyle(s));
   }
+
+  /**
+   * Hook for performing ShadyCSS behavior for each ShadyDOM insertBefore call.
+   *
+   * @param {!HTMLElement} parentNode
+   * @param {!HTMLElement} newNode
+   * @param {?HTMLElement} referenceNode
+   * @return {void}
+   */
+  onInsertBefore(parentNode, newNode, referenceNode) {
+    if (!disableShadowParts) {
+      shadowParts.onInsertBefore(parentNode, newNode, referenceNode);
+    }
+  }
+
   /**
    * Apply styles for the given element
    *

packages/shadycss/src/shadow-parts.js

@@ -165,3 +165,47 @@ export function formatShadyPartSelector(
     })
     .join('');
 }
+
+/*  eslint-disable no-unused-vars */
+/**
+ * Perform any needed Shadow Parts updates after a ShadyDOM insertBefore call
+ * has been made.
+ *
+ * @param {!HTMLElement} parentNode
+ * @param {!HTMLElement} newNode
+ * @param {?HTMLElement} referenceNode
+ * @return {void}
+ */
+export function onInsertBefore(parentNode, newNode, referenceNode) {
+  /* eslint-enable no-unused-vars */
+  if (!parentNode.getRootNode) {
+    // TODO(aomarks) Why is it in noPatch mode on Chrome 41 and other older
+    // browsers that getRootNode is sometimes undefined?
+    return;
+  }
+  const root = parentNode.getRootNode();
+  if (root === document) {
+    // Parts in the document scope would never have any effect. Return early so
+    // we don't waste time querying it.
+    return;
+  }
+  const parts = parentNode.querySelectorAll('[part]');
+  if (parts.length === 0) {
+    return;
+  }
+  const host = root.host;
+  const receiverScope = host.localName;
+  const superRoot = host.getRootNode();
+  const providerScope =
+    superRoot === document ? 'document' : superRoot.host.localName;
+  for (const part of parts) {
+    part.setAttribute(
+      'shady-part',
+      formatShadyPartAttribute(
+        providerScope,
+        receiverScope,
+        part.getAttribute('part')
+      )
+    );
+  }
+}

packages/shadycss/src/style-settings.js

@@ -40,6 +40,10 @@ if (window.ShadyCSS && window.ShadyCSS.cssBuild !== undefined) {
 /** @type {boolean} */
 export const disableRuntime = Boolean(window.ShadyCSS && window.ShadyCSS.disableRuntime);
 
+/** @type {boolean} */
+export const disableShadowParts =
+    Boolean(window.ShadyCSS && window.ShadyCSS.disableShadowParts);
+
 if (window.ShadyCSS && window.ShadyCSS.nativeCss !== undefined) {
   nativeCssVariables_ = window.ShadyCSS.nativeCss;
 } else if (window.ShadyCSS) {
@@ -53,4 +57,4 @@ if (window.ShadyCSS && window.ShadyCSS.nativeCss !== undefined) {
 // Hack for type error under new type inference which doesn't like that
 // nativeCssVariables is updated in a function and assigns the type
 // `function(): ?` instead of `boolean`.
-export const nativeCssVariables = /** @type {boolean} */(nativeCssVariables_);
+export const nativeCssVariables = /** @type {boolean} */(nativeCssVariables_);

packages/shadycss/src/style-transformer.js

@@ -10,9 +10,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 'use strict';
 
-import {StyleNode} from './css-parse.js'; // eslint-disable-line no-unused-vars
+import {StyleNode, parse} from './css-parse.js'; // eslint-disable-line no-unused-vars
 import * as StyleUtil from './style-util.js';
-import {nativeShadow} from './style-settings.js';
+import {nativeShadow, disableShadowParts} from './style-settings.js';
+import {parsePartSelector, formatShadyPartSelector} from './shadow-parts.js';
 
 /* Transforms ShadowDOM styling into ShadyDOM styling
 
@@ -315,6 +316,12 @@ class StyleTransformer {
           NTH, (m, type, inner) => `:${type}(${inner.replace(/\s/g, '')})`);
       selector = this._twiddleNthPlus(selector);
     }
+    if (!disableShadowParts && PART.test(selector)) {
+      // Hacky transform "::part(foo bar)" to "::part(foo,bar)" so that
+      // SIMPLE_SELECTOR_SEP isn't confused by the spaces.
+      // TODO(aomarks) Can we make SIMPLE_SELECTOR_SEP smarter instead?
+      selector = selector.replace(PART, (m) => m.replace(' ', ','));
+    }
     // Preserve selectors like `:-webkit-any` so that SIMPLE_SELECTOR_SEP does
     // not get confused by spaces inside the pseudo selector
     const isMatches = MATCHES.test(selector);
@@ -350,6 +357,8 @@ class StyleTransformer {
     let slottedIndex = selector.indexOf(SLOTTED);
     if (selector.indexOf(HOST) >= 0) {
       selector = this._transformHostSelector(selector, hostScope);
+    } else if (!disableShadowParts && selector.match(PART)) {
+      selector = this._transformPartSelector(selector, hostScope);
     // replace other selectors with scoping class
     } else if (slottedIndex !== 0) {
       selector = scope ? this._transformSimpleSelector(selector, scope) :
@@ -396,6 +405,20 @@ class StyleTransformer {
     return output.join('');
   }
 
+  _transformPartSelector(selector, scope) {
+    const parsed = parsePartSelector(selector);
+    if (parsed === null) {
+      return selector;
+    }
+    const {combinators, elementName, selectors, parts, pseudos} = parsed;
+    // Earlier we did a hacky transform from "part(foo bar)" to "part(foo,bar)"
+    // so that the SIMPLE_SELECTOR regex didn't get confused by spaces.
+    const partSelector =
+        formatShadyPartSelector(scope, elementName, parts.replace(',', ' '));
+    return (scope === 'document' ? '' : scope + ' ') +
+        `${combinators}${elementName}${selectors} ${partSelector}${pseudos}`;
+  }
+
   // :host(...) -> scopeName...
   _transformHostSelector(selector, hostScope) {
     let m = selector.match(HOST_PAREN);
@@ -457,6 +480,8 @@ class StyleTransformer {
       return '';
     } else if (selector.match(SLOTTED)) {
       return this._transformComplexSelector(selector, SCOPE_DOC_SELECTOR);
+    } else if (!disableShadowParts && selector.match(PART)) {
+      return this._transformPartSelector(selector, 'document');
     } else {
       return this._transformSimpleSelector(selector.trim(), SCOPE_DOC_SELECTOR);
     }
@@ -470,6 +495,7 @@ const SIMPLE_SELECTOR_SEP = /(^|[\s>+~]+)((?:\[.+?\]|[^\s>+~=[])+)/g;
 const SIMPLE_SELECTOR_PREFIX = /[[.:#*]/;
 const HOST = ':host';
 const ROOT = ':root';
+const PART = /::part\([^)]*\)/;
 const SLOTTED = '::slotted';
 const SLOTTED_START = new RegExp(`^(${SLOTTED})`);
 // NOTE: this supports 1 nested () pair for things like

packages/shadydom/src/patches/Node.js

@@ -375,6 +375,12 @@ export const NodePatches = utils.getOwnPropertyDescriptors({
     } else if (node.ownerDocument !== this.ownerDocument) {
       this.ownerDocument.adoptNode(node);
     }
+    if (!utils.disableShadowParts) {
+      const shim = getScopingShim();
+      if (shim) {
+        shim['onInsertBefore'](this, node, ref_node);
+      }
+    }
     return node;
   },
 

packages/shadydom/src/style-scoping.js

@@ -134,4 +134,4 @@ export function treeVisitor(node, visitorFn) {
       treeVisitor(n, visitorFn);
     }
   }
-}
+}

packages/shadydom/src/utils.js

@@ -12,6 +12,10 @@ import {shadyDataForNode} from './shady-data.js';
 /** @type {!Object} */
 export const settings = window['ShadyDOM'] || {};
 
+/** @type {boolean} */
+export const disableShadowParts =
+    Boolean(window['ShadyCSS'] && window['ShadyCSS']['disableShadowParts']);
+
 settings.hasNativeShadowDOM = Boolean(Element.prototype.attachShadow && Node.prototype.getRootNode);
 
 // The user might need to pass the custom elements polyfill a flag by setting an

packages/tests/shadycss/runner.html

@@ -73,7 +73,9 @@
     webcomponents = 'wc-register=true';
   }
   // if native is available, make sure to test polyfill
-  if (Element.prototype.attachShadow && document.documentElement.getRootNode) {
+  const hasNativeShadow =
+      Element.prototype.attachShadow && document.documentElement.getRootNode;
+  if (hasNativeShadow) {
     webcomponents = addUrlOption(webcomponents, 'wc-shadydom=true');
   }
   // ce + sd becomes a single test iteration.
@@ -112,5 +114,14 @@
     ]);
   }
 
+  // Skip shadow part tests if the browser supports shadow DOM but not shadow
+  // parts, unless we are forcing the polyfill on. ShadyCSS doesn't polyfill
+  // just shadow parts on top of native shadow DOM, so these would fail.
+  const hasNativeParts = 'part' in HTMLElement.prototype;
+  if (hasNativeShadow && !hasNativeParts) {
+    suites = suites.filter((url) =>
+        !(url.startsWith('shadow-parts/') && !url.includes('wc-shadydom')));
+  }
+
   WCT.loadSuites(suites);
 </script>

packages/tests/shadycss/shadow-parts/basic.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright (c) 2020 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
+-->
+
+<title>shadycss/shadow-parts/basic</title>
+
+<script src="../test-flags.js"></script>
+<script src="../../node_modules/wct-browser-legacy/browser.js"></script>
+<script src="../../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script>
+<script src="../../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
+<script src="../../node_modules/@webcomponents/template/template.js"></script>
+<script src="../../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
+<script src="../../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
+<script src="../../node_modules/@webcomponents/shadycss/scoping-shim.min.js"></script>
+<script src="../module/generated/make-element.js"></script>
+
+<template id="x-a">
+  <style>
+    x-b::part(pa) {
+      color: red;
+    }
+  </style>
+  <x-b></x-b>
+</template>
+
+<template id="x-b">
+  <div part="pa">pa</div>
+  <div part="pb">pb</div>
+</template>
+
+<script type="module">
+  import {pierce, color, black, red} from './test-utils.js';
+
+  suite('basic part styles', () => {
+    suiteSetup(() => {
+      makeElement('x-a');
+      makeElement('x-b');
+    });
+
+    let xa, pa, pb;
+
+    setup(() => {
+      xa = document.createElement('x-a');
+      document.body.appendChild(xa);
+      pa = pierce('x-a', 'x-b', '[part=pa]');
+      pb = pierce('x-a', 'x-b', '[part=pb]');
+    });
+
+    teardown(() => {
+      document.body.removeChild(xa);
+    });
+
+    test('selected part receives style', () => {
+      assert.equal(color(pa), red);
+    });
+
+    test('not selected part does not receive style', () => {
+      assert.equal(color(pb), black);
+    });
+
+    test('newly added part receives style', () => {
+      const xb2 = document.createElement('x-b');
+      xa.shadowRoot.appendChild(xb2);
+      const pa2 = pierce(xb2, '[part=pa]');
+      assert.equal(color(pa2), red);
+    });
+
+    if (!window.ShadyCSS.nativeShadow) {
+      test('parts get shady-part attributes', () => {
+        assert.equal(pa.getAttribute('shady-part'), 'x-a:x-b:pa');
+        assert.equal(pb.getAttribute('shady-part'), 'x-a:x-b:pb');
+      });
+
+      test('style transformed with shady-part attribute', () => {
+        const style = document.querySelector('style[scope=x-a]');
+        assert.equal(
+          style.textContent.replace(/\n/gm, ' ').replace(/\s+/g, ' ').trim(),
+          `x-a x-b [shady-part~="x-a:x-b:pa"] { color: red; }`
+        );
+      });
+    }
+  });
+</script>