panel - npm Package Compare versions

Comparing version 5.11.0 to 5.12.0

build/component.js

@@ -46,2 +46,3 @@ 'use strict';
 };
+var stylesheetCache = new Map(); // key is the component constructor, value is a CSSStyleSheet instance
 
@@ -398,5 +399,22 @@ /**
       _this.el = _this.attachShadow({ mode: 'open' });
-      _this.styleTag = document.createElement('style');
-      _this.styleTag.innerHTML = _this.getConfig('css');
-      _this.el.appendChild(_this.styleTag);
+
+      var css = _this.getConfig('css');
+      if (css) {
+        if (_this.el.adoptedStyleSheets) {
+          // Attempt to cache the styles using Constructible StyleSheets if the feature is supported.
+          // Note: this technique avoids the Flash of Unstyled Content that alternative approaches like <link> tags will encounter
+          var componentKey = _this.constructor;
+          var stylesheet = stylesheetCache.get(componentKey);
+          if (!stylesheet) {
+            stylesheet = new CSSStyleSheet();
+            stylesheet.replaceSync(css);
+            stylesheetCache.set(componentKey, stylesheet);
+          }
+          _this.el.adoptedStyleSheets = [stylesheet];
+        } else {
+          var styleTag = document.createElement('style');
+          styleTag.innerHTML = css;
+          _this.el.appendChild(styleTag);
+        }
+      }
     } else if (_this.getConfig('css')) {
@@ -686,3 +704,3 @@ throw Error('"useShadowDom" config option must be set in order to use "css" config.');
       if (attr === 'style-override') {
-        this._applyStyles(newVal);
+        this._applyStyleOverride(newVal);
       }
@@ -695,6 +713,18 @@
   }, {
-    key: '_applyStyles',
-    value: function _applyStyles(styleOverride) {
+    key: '_applyStyleOverride',
+    value: function _applyStyleOverride(styleOverride) {
       if (this.getConfig('useShadowDom')) {
-        this.styleTag.innerHTML = this.getConfig('css') + (styleOverride || '');
+        if (this.el.adoptedStyleSheets) {
+          if (!this.styleOverrideStyleSheet) {
+            this.styleOverrideStyleSheet = new CSSStyleSheet();
+            this.el.adoptedStyleSheets = this.el.adoptedStyleSheets.concat(this.styleOverrideStyleSheet);
+          }
+          this.styleOverrideStyleSheet.replaceSync(styleOverride || '');
+        } else {
+          if (!this.styleOverrideTag) {
+            this.styleOverrideTag = document.createElement('style');
+            this.el.appendChild(this.styleOverrideTag);
+          }
+          this.styleOverrideTag.innerHTML = styleOverride || '';
+        }
       }
@@ -701,0 +731,0 @@ }

lib/component.js

@@ -16,2 +16,3 @@ import cuid from 'cuid';
 };
+const stylesheetCache = new Map(); // key is the component constructor, value is a CSSStyleSheet instance
 
@@ -320,5 +321,22 @@ /**
       this.el = this.attachShadow({mode: `open`});
-      this.styleTag = document.createElement(`style`);
-      this.styleTag.innerHTML = this.getConfig(`css`);
-      this.el.appendChild(this.styleTag);
+
+      const css = this.getConfig(`css`);
+      if (css) {
+        if (this.el.adoptedStyleSheets) {
+          // Attempt to cache the styles using Constructible StyleSheets if the feature is supported.
+          // Note: this technique avoids the Flash of Unstyled Content that alternative approaches like <link> tags will encounter
+          const componentKey = this.constructor;
+          let stylesheet = stylesheetCache.get(componentKey);
+          if (!stylesheet) {
+            stylesheet = new CSSStyleSheet();
+            stylesheet.replaceSync(css);
+            stylesheetCache.set(componentKey, stylesheet);
+          }
+          this.el.adoptedStyleSheets = [stylesheet];
+        } else {
+          const styleTag = document.createElement(`style`);
+          styleTag.innerHTML = css;
+          this.el.appendChild(styleTag);
+        }
+      }
     } else if (this.getConfig(`css`)) {
@@ -554,3 +572,3 @@ throw Error(`"useShadowDom" config option must be set in order to use "css" config.`);
     if (attr === `style-override`) {
-      this._applyStyles(newVal);
+      this._applyStyleOverride(newVal);
     }
@@ -563,5 +581,17 @@
 
-  _applyStyles(styleOverride) {
+  _applyStyleOverride(styleOverride) {
     if (this.getConfig(`useShadowDom`)) {
-      this.styleTag.innerHTML = this.getConfig(`css`) + (styleOverride || ``);
+      if (this.el.adoptedStyleSheets) {
+        if (!this.styleOverrideStyleSheet) {
+          this.styleOverrideStyleSheet = new CSSStyleSheet();
+          this.el.adoptedStyleSheets = this.el.adoptedStyleSheets.concat(this.styleOverrideStyleSheet);
+        }
+        this.styleOverrideStyleSheet.replaceSync(styleOverride || ``);
+      } else {
+        if (!this.styleOverrideTag) {
+          this.styleOverrideTag = document.createElement(`style`);
+          this.el.appendChild(this.styleOverrideTag);
+        }
+        this.styleOverrideTag.innerHTML = styleOverride || ``;
+      }
     }
@@ -568,0 +598,0 @@ }

package.json

 {
   "name": "panel",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "description": "Web Components with Virtual DOM: lightweight composable web apps",
@@ -5,0 +5,0 @@ "main": "build/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

147262

increased by1.86%

Lines of code

3363

increased by1.75%

No dependency changes