Allow adding type="custom" to avoid deprecation warning. Fixes #5017

Polymer · Jan 5, 2018 · fb522f6 · fb522f6
1 parent d8fafab
commit fb522f6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/lib/elements/custom-style.html b/lib/elements/custom-style.html
@@ -13,8 +13,9 @@
 (function() {
   'use strict';
 
-  const attr = 'include';
-
+  const INCLUDE = 'include';
+  const TYPE = 'type';
+
   const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
 
   /**
@@ -86,9 +87,9 @@
         return null;
       }
       this._style = style;
-      const include = style.getAttribute(attr);
+      const include = style.getAttribute(INCLUDE);
       if (include) {
-        style.removeAttribute(attr);
+        style.removeAttribute(INCLUDE);
         style.textContent = Polymer.StyleGather.cssFromModules(include) + style.textContent;
       }
       /*
@@ -102,6 +103,11 @@
       cases of ordering w.r.t the main document styles.
       */
       if (this.ownerDocument !== window.document) {
+        // Allow users to add `type="custom"` to <style> tags to avoid deprecation warning
+        const type = style.getAttribute(TYPE);
+        if (type == 'custom') {
+          style.removeAttribute(TYPE);
+        }
         window.document.head.appendChild(this);
       }
       return this._style;

diff --git a/test/unit/custom-style-import.html b/test/unit/custom-style-import.html
@@ -29,9 +29,9 @@
 
 <link rel="import" href="sub/style-import.html">
 
-<custom-style>
+<custom-style id="type-was-custom">
 <style is="custom-style" include="shared-style style-import
-  style-import2">
+  style-import2" type="custom">
   html {
 
     --import-mixin: {

diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
@@ -365,6 +365,12 @@
         assertComputed(m, '4px');
       });
 
+      test('imported custom-style style with type="custom" has type removed', function() {
+        const customStyle = document.head.querySelector('custom-style#type-was-custom');
+        const style = customStyle.querySelector('style');
+        assert.isFalse(style.hasAttribute('type'));
+      });
+
       test('dynamic custom-styles apply', function() {
         var dynamic = document.querySelector('.dynamic');
         assertComputed(dynamic, '0px');