Shady Parts: improved support for mutations, plus small bugfixes

packages/shadycss/externs/shadycss-externs.js

@@ -10,6 +10,8 @@
  * flushCustomStyles: function(),
  * getComputedStyleValue: function(!Element, string): string,
  * onInsertBefore: function(!HTMLElement, !HTMLElement, ?HTMLElement): void,
+ * onSetAttribute: function(!HTMLElement, !string, !string): void,
+ * onRemoveAttribute: function(!HTMLElement, !string): void,
  * ScopingShim: (Object|undefined),
  * ApplyShim: (Object|undefined),
  * CustomStyleInterface: (Object|undefined),

packages/shadycss/src/common-utils.js

@@ -12,6 +12,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 import { MIXIN_MATCH, VAR_ASSIGN } from './common-regex.js';
 
+/**
+ * The prefix used by ShadyDOM for the native version of patched methods
+ * (e.g. `__shady_native_setAttribute`).
+ * @type {!string}
+ */
+export const NATIVE_PREFIX = '__shady_native_';
+
 /**
  * @param {Element} element
  * @param {Object=} properties

packages/shadycss/src/scoping-shim.js

@@ -295,6 +295,46 @@ export default class ScopingShim {
     }
   }
 
+  /* eslint-disable no-unused-vars */
+
+  /**
+   * Hook for performing ShadyCSS updates when a relevant attribute is set.
+   * Note ShadyDOM will only call this function for "part" and "exportparts"
+   * attributes.
+   *
+   * @param {!HTMLElement} element Element
+   * @param {!string} name Attribute name.
+   * @param {!string} value Attribute value.
+   * @return {void}
+   */
+  onSetAttribute(element, name, value) {
+    if (!disableShadowParts) {
+      if (name === 'part') {
+        shadowParts.onSetPartAttribute(element);
+      }
+    }
+  }
+
+  /* eslint-enable no-unused-vars */
+
+  /**
+   * Hook for performing ShadyCSS updates when a relevant attribute is removed.
+   * Note ShadyDOM will only call this function for "part" and "exportparts"
+   * attributes.
+   *
+   * @param {!HTMLElement} element Element
+   * @param {!string} name Attribute name ("part" or "exportparts")
+   * @param {!string} value Attribute value.
+   * @return {void}
+   */
+  onRemoveAttribute(element, name, value) {
+    if (!disableShadowParts) {
+      if (name === 'part') {
+        shadowParts.onRemovePartAttribute(element);
+      }
+    }
+  }
+
   /**
    * Apply styles for the given element
    *

packages/shadycss/src/shadow-parts.js

@@ -12,7 +12,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 import {StyleNode} from './css-parse.js';
 import StyleInfo from './style-info.js';
 import StyleProperties from './style-properties.js';
+import * as StyleUtil from './style-util.js';
 import {nativeCssVariables} from './style-settings.js';
+import {NATIVE_PREFIX} from './common-utils.js';
+
+/**
+ * Set the "shady-part" attribute using the native method.
+ *
+ * @param {!HTMLElement} element
+ * @param {!string} value
+ * @return {void}
+ */
+function setShadyPartAttribute(element, value) {
+  element[NATIVE_PREFIX + 'setAttribute']('shady-part', value);
+}
+
+/**
+ * Remove the "shady-part" attribute using the native method.
+ *
+ * @param {!HTMLElement} element
+ * @return {void}
+ */
+function removeShadyPartAttribute(element) {
+  element[NATIVE_PREFIX + 'removeAttribute']('shady-part');
+}
 
 /**
  * Parse a CSS Shadow Parts "part" attribute into an array of part names.
@@ -71,9 +94,9 @@ export function parseExportPartsAttribute(attr) {
 /**
  * Regular expression to de-compose a ::part rule into interesting pieces. See
  * parsePartSelector for description of pieces.
- *                  [0  ][1         ][2      ]        [3 ]   [4   ]
+ *                  [0  ][1              ][2      ]        [3 ]   [4    ]
  */
-const PART_REGEX = /(.*?)([a-z]+-\w+)([^\s]*?)::part\((.*)?\)(::?.*)?/;
+const PART_REGEX = /(.*?)([a-z]+(?:-\w+)+)([^\s]*?)::part\((.*)?\)(::?.*)?/;
 
 /**
  * De-compose a ::part rule into interesting pieces.
@@ -299,6 +322,36 @@ export function findExportedPartMappings(host) {
   return result;
 }
 
+/**
+ * Update the "shady-part" attribute when the "part" attribute is set.
+ *
+ * @param {!HTMLElement} element The element.
+ * @return {void}
+ */
+export function onSetPartAttribute(element) {
+  if (!element.getRootNode) {
+    // TODO(aomarks) We're in noPatch mode. Wrap where needed and add tests.
+    // https://github.com/webcomponents/polyfills/issues/343
+    return;
+  }
+  const root = element.getRootNode();
+  if (root === document || root === element) {
+    // Nowhere to receive part styles from.
+    return;
+  }
+  addShadyPartAttributes(root.host, [element]);
+}
+
+/**
+ * Remove the "shady-part" attribute when the "part" attribute is removed.
+ *
+ * @param {!HTMLElement} element The element.
+ * @return {void}
+ */
+export function onRemovePartAttribute(element) {
+  removeShadyPartAttribute(element);
+}
+
 /* eslint-disable no-unused-vars */
 /**
  * Add "shady-part" attributes to new nodes on insertion.
@@ -313,8 +366,8 @@ export function findExportedPartMappings(host) {
  */
 export function onInsertBefore(parentNode, newNode, referenceNode) {
   /* eslint-enable no-unused-vars */
-  if (newNode instanceof Text) {
-    // No parts in text.
+  if (newNode instanceof Text || newNode instanceof Comment) {
+    // No parts in text or comments.
     return;
   }
   if (!parentNode.getRootNode) {
@@ -345,6 +398,18 @@ export function onInsertBefore(parentNode, newNode, referenceNode) {
   if (parts.length === 0) {
     return;
   }
+  addShadyPartAttributes(host, parts);
+}
+
+/**
+ * Add "shady-part" attributes to the given part nodes. All part nodes are
+ * assumed to be in the same given host.
+ *
+ * @param {!HTMLElement} host The host element of the given parts.
+ * @param {!Array<!HTMLElement>} parts The new or changed part elements.
+ * @return {void}
+ */
+export function addShadyPartAttributes(host, parts) {
   const hostScope = host.localName;
   const superRoot = host.getRootNode();
   const parentScope =
@@ -360,6 +425,9 @@ export function onInsertBefore(parentNode, newNode, referenceNode) {
     const shadyParts = [];
     const partNames = splitPartString(node.getAttribute('part'));
     if (partNames.length === 0) {
+      // Remove the "shady-part" attribute to support the case of "part" getting set to
+      // the empty string or whitespace.
+      removeShadyPartAttribute(node);
       continue;
     }
 
@@ -389,7 +457,7 @@ export function onInsertBefore(parentNode, newNode, referenceNode) {
         }
       }
     }
-    node.setAttribute('shady-part', shadyParts.join(' '));
+    setShadyPartAttribute(node, shadyParts.join(' '));
 
     if (!nativeCssVariables) {
       // Find the part rules that match this node and that consume custom
@@ -546,39 +614,42 @@ export function analyzeTemplatePartRules(providerScope, styleAst) {
     return;
   }
   for (const styleNode of styleAst.rules) {
-    const selector = styleNode['selector'];
-    if (!selector || selector.indexOf('::part') === -1) {
+    const selectorList = styleNode['selector'];
+    if (!selectorList || selectorList.indexOf('::part') === -1) {
       // TODO(aomarks) We do the `indexOf` check here to make the case where no
       // `::part` rules are used is as fast as possible, but we could get away
       // with just the `parsePartSelector` call we're doing next if the
       // difference is negligible. Needs benchmarking.
       continue;
     }
-    const parsed = parsePartSelector(selector);
-    if (parsed === null) {
-      continue;
-    }
     const consumedProperties = findConsumedCustomProperties(
       styleNode['cssText']
     );
     if (consumedProperties.length === 0) {
       continue;
     }
-    const {elementName: receiverScope, parts} = parsed;
-    if (parts.length === 0) {
-      continue;
-    }
-    const key = [providerScope, receiverScope].join(':');
-    let entries = partRulesMap.get(key);
-    if (entries === undefined) {
-      entries = [];
-      partRulesMap.set(key, entries);
+    const selectors = StyleUtil.splitSelectorList(selectorList);
+    for (const selector of selectors) {
+      const parsed = parsePartSelector(selector);
+      if (parsed === null) {
+        continue;
+      }
+      const {elementName: receiverScope, parts} = parsed;
+      if (parts.length === 0) {
+        continue;
+      }
+      const key = [providerScope, receiverScope].join(':');
+      let entries = partRulesMap.get(key);
+      if (entries === undefined) {
+        entries = [];
+        partRulesMap.set(key, entries);
+      }
+      entries.push({
+        styleNode,
+        consumedProperties,
+        partNames: splitPartString(parts),
+      });
     }
-    entries.push({
-      styleNode,
-      consumedProperties,
-      partNames: splitPartString(parts),
-    });
   }
 }
 

packages/shadydom/src/patches/Element.js

@@ -13,6 +13,7 @@ import {scopeClassAttribute} from '../style-scoping.js';
 import {shadyDataForNode} from '../shady-data.js';
 import {attachShadow, ownerShadyRootForNode} from '../attach-shadow.js';
 import {eventPropertyNamesForElement, wrappedDescriptorForEventProperty} from '../patch-events.js';
+import {getScopingShim} from '../style-scoping.js';
 
 const doc = window.document;
 
@@ -102,6 +103,12 @@ export const ElementPatches = utils.getOwnPropertyDescriptors({
     } else if (!scopeClassAttribute(this, attr, value)) {
       this[utils.NATIVE_PREFIX + 'setAttribute'](attr, value);
       distributeAttributeChange(this, attr);
+      if (!utils.disableShadowParts && attr === 'part') {
+        const shim = getScopingShim();
+        if (shim) {
+          shim['onSetAttribute'](this, attr, value);
+        }
+      }
     }
   },
 
@@ -115,6 +122,12 @@ export const ElementPatches = utils.getOwnPropertyDescriptors({
     } else if (!scopeClassAttribute(this, attr, '')) {
       this[utils.NATIVE_PREFIX + 'removeAttribute'](attr);
       distributeAttributeChange(this, attr);
+      if (!utils.disableShadowParts && attr === 'part') {
+        const shim = getScopingShim();
+        if (shim) {
+          shim['onRemoveAttribute'](this, attr);
+        }
+      }
     } else if (this.getAttribute(attr) === '') {
       // ensure that "class" attribute is fully removed if ShadyCSS does not keep scoping
       this[utils.NATIVE_PREFIX + 'removeAttribute'](attr);