Merge pull request #31 from webcomponents/ie-compat

changes for IE11 compatibility.

bower.json

@@ -21,6 +21,6 @@
   },
   "devDependencies": {
     "web-component-tester": "^4.3.5",
-    "shadydom": "webcomponents/shadydom"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#v1"
   }
 }

src/ShadyCSS.js

@@ -311,43 +311,41 @@ export let ShadyCSS = {
   // given an element and a classString, replaces
   // the element's class with the provided classString and adds
   // any necessary ShadyCSS static and property based scoping selectors
-  // NOTE: this method is suitable to be called in an environment in which
-  // setAttribute('class', ...) and className setter have been overridden so
-  // it cannot rely on those methods.
   setElementClass(element, classString) {
-    // scope by shadyRoot host
     let root = element.getRootNode();
+    let classes = classString ? classString.split(/\s/) : [];
     let scopeName = root.host && root.host.localName;
-    // use classList to clear existing classes
-    while (element.classList.length) {
-      let k = element.classList[0];
-      // if scope not found and element is currently scoped,
-      // use existing scope (helps catch elements that set `class` while
-      // inside a disconnected dom fragment)
-      // NOTE: relies on the scoping class always being adjacent to the
-      // SCOPE_NAME class.
-      if (!scopeName && k == StyleTransformer.SCOPE_NAME) {
-        scopeName = element.classList[1];
+    // If no scope, try to discover scope name from existing class.
+    // This can occur if, for example, a template stamped element that
+    // has been scoped is manipulated when not in a root.
+    if (!scopeName) {
+      var classAttr = element.getAttribute('class');
+      if (classAttr) {
+        let k$ = classAttr.split(/\s/);
+        for (let i=0; i < k$.length; i++) {
+          if (k$[i] === StyleTransformer.SCOPE_NAME) {
+            scopeName = k$[i+1];
+            break;
+          }
+        }
       }
-      element.classList.remove(k);
     }
-    // add user classString
-    let classes = classString.split(' ').filter((c) => c);
     if (scopeName) {
       classes.push(StyleTransformer.SCOPE_NAME, scopeName);
     }
-    if (classes.length) {
-      element.classList.add(...classes);
-    }
-
-    // add property scoping: scope by special selector
     if (!this.nativeCss) {
       let styleInfo = StyleInfo.get(element);
       if (styleInfo && styleInfo.scopeSelector) {
-        element.classList.add(StyleProperties.XSCOPE_NAME,
-          styleInfo.scopeSelector);
+        classes.push(StyleProperties.XSCOPE_NAME, styleInfo.scopeSelector);
       }
     }
+    let out = classes.join(' ');
+    // use native setAttribute provided by ShadyDOM when setAttribute is patched
+    if (element.__nativeSetAttribute) {
+      element.__nativeSetAttribute('class', out);
+    } else {
+      element.setAttribute('class', out);
+    }
   },
   _styleInfoForNode(node) {
     return StyleInfo.get(node);

src/document-watcher.js

@@ -16,6 +16,14 @@ import {StyleTransformer} from './style-transformer'
 export let flush = function() {};
 
 if (!nativeShadow) {
+  let elementNeedsScoping = (element) => {
+    return (element.classList &&
+      !element.classList.contains(StyleTransformer.SCOPE_NAME) ||
+      // note: necessary for IE11
+      (element instanceof SVGElement &&
+      element.getAttribute('class').indexOf(StyleTransformer.SCOPE_NAME) < 0));
+  }
+
   let handler = (mxns) => {
     for (let x=0; x < mxns.length; x++) {
       let mxn = mxns[x];
@@ -25,8 +33,7 @@ if (!nativeShadow) {
       }
       for (let i=0; i < mxn.addedNodes.length; i++) {
         let n = mxn.addedNodes[i];
-        if (n.nodeType === Node.ELEMENT_NODE &&
-            !n.classList.contains(StyleTransformer.SCOPE_NAME)) {
+        if (elementNeedsScoping(n)) {
           let root = n.getRootNode();
           if (root.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
             // may no longer be in a shadowroot

src/style-properties.js

@@ -431,10 +431,19 @@ export let StyleProperties = {
 
   applyElementScopeSelector: function(element, selector, old) {
     let c = element.getAttribute('class') || '';
-    let v = old ? c.replace(old, selector) :
-      (c ? c + ' ' : '') + this.XSCOPE_NAME + ' ' + selector;
+    let v = c;
+    if (old) {
+      v = c.replace(
+        new RegExp('\\s*' + this.XSCOPE_NAME + '\\s*' + old + '\\s*', 'g'), ' ');
+    }
+    v += (v ? ' ' : '') + this.XSCOPE_NAME + ' ' + selector;
     if (c !== v) {
-      element.setAttribute('class', v);
+      // hook from ShadyDOM
+      if (element.__nativeSetAttribute) {
+        element.__nativeSetAttribute('class', v);
+      } else {
+        element.setAttribute('class', v);
+      }
     }
   },
 

src/style-transformer.js

@@ -49,7 +49,7 @@ export let StyleTransformer = {
   },
 
   _transformDom: function(node, selector, shouldRemoveScope) {
-    if (node.classList) {
+    if (node.nodeType === Node.ELEMENT_NODE) {
       this.element(node, selector, shouldRemoveScope);
     }
     let c$ = (node.localName === 'template') ?

tests/apply-shim.html

@@ -14,10 +14,7 @@
   <meta charset="utf-8">
 
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../custom-elements/custom-elements.min.js"></script>
-  <script src="../../shadydom/shadydom.min.js"></script>
-  <script src="../../shadycss/shadycss.min.js"></script>
-
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <title>Apply Shim</title>
 
 </head>

tests/css-parse.html

@@ -14,7 +14,7 @@
   <meta charset="utf-8">
 
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../custom-elements/custom-elements.min.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="module/generated/css-parse.js"></script>
 
   <title>css-parse</title>

tests/scoping.html

@@ -16,9 +16,7 @@
     window.ShadyDOM = {force: true};
     window.ShadyCSS = {shimshadow: true};
   </script>
-  <script src="../../custom-elements/custom-elements.min.js"></script>
-  <script src="../../shadydom/shadydom.min.js"></script>
-  <script src="../../shadycss/shadycss.min.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
   <style>
     #priority.style-scope {

tests/style-transformer.html

@@ -13,7 +13,7 @@
 <script>
 window.ShadyCSS = {shimshadow: true};
 </script>
-<script src="../../shadycss/shadycss.min.js"></script>
+<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 <script src="module/generated/style-transformer.js"></script>
 <title>Style Transformer</title>