@ucd-lib/theme-elements 2.1.3 → 3.0.0

package/brand/ucd-theme-collapse/ucd-theme-collapse.tpl.js

@@ -13,11 +13,6 @@ export function styles() {
     [hidden] {
       display: none;
     }
-
-    .collapse__content {
-      background-color: var(--collapse-background-color, white);
-      border-color: var(--collapse-border-color, black);
-    }
   `;
 
   return [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "2.1.3",
+  "version": "3.0.0",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {

package/utils/mixins/main-dom-element.js

@@ -15,6 +15,19 @@ const MainDomElement = (superClass) => class extends superClass {
    * @returns {LitElement}
    */
   createRenderRoot() {
+    // hack for inserting styles into main dom
+    let styles = this.constructor.elementStyles || [];
+    if( !Array.isArray(styles) ) styles = [styles];
+
+    for (const s of styles) {
+      const style = document.createElement('style');
+      const nonce = global['litNonce'];
+      if (nonce !== undefined) {
+        style.setAttribute('nonce', nonce);
+      }
+      style.textContent = s.cssText;
+      this.appendChild(style);
+    }
     return this;
   }