Elements: Scope style rules to element template only

lib/Widget/Render/WidgetHtmlRenderer.php

@@ -588,10 +588,15 @@ private function render(
                                 );
                             }
                             if ($moduleTemplate->stencil->style !== null) {
-                                $twig['style'][] = $this->twig->fetchFromString(
-                                    $moduleTemplate->stencil->style,
-                                    $widgetData['templateProperties'],
-                                );
+                                $twig['style'][] = [
+                                    'content' => $this->twig->fetchFromString(
+                                        $moduleTemplate->stencil->style,
+                                        $widgetData['templateProperties'],
+                                    ),
+                                    'type' => $moduleTemplate->type,
+                                    'dataType' => $moduleTemplate->dataType,
+                                    'templateId' => $moduleTemplate->templateId,
+                                ];
                             }
                         }
                         break;
@@ -631,10 +636,14 @@ private function render(
                     );
                 }
                 if ($module->stencil->style !== null) {
-                    $twig['style'][] = $this->twig->fetchFromString(
-                        $module->stencil->style,
-                        $modulePropertyValues,
-                    );
+                    $twig['style'][] = [
+                        'content' => $this->twig->fetchFromString(
+                            $module->stencil->style,
+                            $modulePropertyValues,
+                        ),
+                        'type' => $module->type,
+                        'dataType' => $module->dataType,
+                    ];
                 }
             }
 
@@ -755,7 +764,12 @@ private function render(
                 }
 
                 if ($extension->stencil->style !== null) {
-                    $twig['style'][] = $extension->stencil->style;
+                    $twig['style'][] = [
+                        'content' => $extension->stencil->style,
+                        'type' => $moduleTemplate->type,
+                        'dataType' => $moduleTemplate->dataType,
+                        'templateId' => $moduleTemplate->templateId,
+                    ];
                     $isExtensionHasStyle = true;
                 }
             }
@@ -774,7 +788,14 @@ private function render(
                 && !$isExtensionHasStyle
                 && $moduleTemplate->type === 'element'
             ) {
-                $twig['style'][] = $moduleTemplate->stencil->style;
+                // Add more info to the element style
+                // so we can use it to create CSS scope
+                $twig['style'][] = [
+                    'content' => $moduleTemplate->stencil->style,
+                    'type' => $moduleTemplate->type,
+                    'dataType' => $moduleTemplate->dataType,
+                    'templateId' => $moduleTemplate->templateId,
+                ];
             }
 
             if ($moduleTemplate->onTemplateRender !== null) {

modules/player.bundle.min.js

@@ -3039,6 +3039,7 @@ __webpack_require__(/*! core-js/modules/es.array.from.js */ "./node_modules/core
 __webpack_require__(/*! core-js/modules/es.array.includes.js */ "./node_modules/core-js/modules/es.array.includes.js");
 __webpack_require__(/*! core-js/modules/es.array.is-array.js */ "./node_modules/core-js/modules/es.array.is-array.js");
 __webpack_require__(/*! core-js/modules/es.array.iterator.js */ "./node_modules/core-js/modules/es.array.iterator.js");
+__webpack_require__(/*! core-js/modules/es.array.join.js */ "./node_modules/core-js/modules/es.array.join.js");
 __webpack_require__(/*! core-js/modules/es.array.map.js */ "./node_modules/core-js/modules/es.array.map.js");
 __webpack_require__(/*! core-js/modules/es.array.push.js */ "./node_modules/core-js/modules/es.array.push.js");
 __webpack_require__(/*! core-js/modules/es.array.reduce.js */ "./node_modules/core-js/modules/es.array.reduce.js");
@@ -3068,6 +3069,7 @@ __webpack_require__(/*! core-js/modules/es.string.includes.js */ "./node_modules
 __webpack_require__(/*! core-js/modules/es.string.iterator.js */ "./node_modules/core-js/modules/es.string.iterator.js");
 __webpack_require__(/*! core-js/modules/es.string.match.js */ "./node_modules/core-js/modules/es.string.match.js");
 __webpack_require__(/*! core-js/modules/es.string.search.js */ "./node_modules/core-js/modules/es.string.search.js");
+__webpack_require__(/*! core-js/modules/es.string.trim.js */ "./node_modules/core-js/modules/es.string.trim.js");
 __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
 __webpack_require__(/*! core-js/modules/web.dom-collections.iterator.js */ "./node_modules/core-js/modules/web.dom-collections.iterator.js");
 __webpack_require__(/*! core-js/modules/web.timers.js */ "./node_modules/core-js/modules/web.timers.js");
@@ -3684,6 +3686,19 @@ XiboPlayer.prototype.init = function () {
   // Create global render array of functions
   window.renders = [];
 
+  // If we have scoped styles for elements
+  // convert the CSS rules to use it
+  $('style[data-style-scope][data-style-target="element"]').each(function (_idx, styleEl) {
+    var scopeName = $(styleEl).data('style-scope');
+    var styleContent = $(styleEl).html();
+    function scopeCSS(css, scope) {
+      return css.split('}').map(function (rule) {
+        return rule.trim() ? "".concat(scope, " ").concat(rule.trim(), "}") : '';
+      }).join('\n').trim();
+    }
+    $(styleEl).html(scopeCSS(styleContent, '[data-style-scope="' + scopeName + '"]'));
+  });
+
   // Loop through each widget from widgetData
   if (widgetData.length > 0) {
     widgetData.forEach(function (inputWidget, widgetIndex) {
@@ -4223,7 +4238,16 @@ XiboPlayer.prototype.renderGlobalElements = function (currentWidget) {
             var _groupItem$templateDa;
             // Load element functions
             self.loadElementFunctions(groupItem, {});
-            groupItem.hbs($groupContent) && $groupContent.append(PlayerHelper.renderElement(groupItem.hbs, groupItem.templateData, true));
+            if (groupItem.hbs && $groupContent) {
+              var $elementContent = $(PlayerHelper.renderElement(groupItem.hbs, groupItem.templateData, true));
+
+              // Add style scope to container
+              var $elementContentContainer = $('<div>');
+              $elementContentContainer.append($elementContent).attr('data-style-scope', 'element_' + groupItem.templateData.type + '__' + groupItem.templateData.id);
+
+              // Append to main container
+              $content.append($elementContentContainer);
+            }
             var itemID = groupItem.uniqueID || ((_groupItem$templateDa = groupItem.templateData) === null || _groupItem$templateDa === void 0 ? void 0 : _groupItem$templateDa.uniqueID);
 
             // Call onTemplateRender
@@ -4246,7 +4270,16 @@ XiboPlayer.prototype.renderGlobalElements = function (currentWidget) {
         // Single elements
         // Load element functions
         self.loadElementFunctions(elemObj, {});
-        elemObj.hbs && $content.append(PlayerHelper.renderElement(elemObj.hbs, elemObj.templateData, true));
+        if (elemObj.hbs) {
+          var $elementContent = $(PlayerHelper.renderElement(elemObj.hbs, elemObj.templateData, true));
+
+          // Add style scope to container
+          var $elementContentContainer = $('<div>');
+          $elementContentContainer.append($elementContent).attr('data-style-scope', "element_".concat(elemObj.templateData.type, "__").concat(elemObj.templateData.id));
+
+          // Append to main container
+          $content.append($elementContentContainer);
+        }
         var itemID = elemObj.uniqueID || ((_elemObj$templateData = elemObj.templateData) === null || _elemObj$templateData === void 0 ? void 0 : _elemObj$templateData.uniqueID);
 
         // Call onTemplateRender
@@ -7421,7 +7454,12 @@ var PlayerHelper = function () {
           }
         }
       }
-      $itemContainer.append(self.renderElement(item.hbs, props));
+      var $elementContent = $(self.renderElement(item.hbs, props));
+
+      // Add style scope to container
+      var $elementContentContainer = $('<div>');
+      $elementContentContainer.append($elementContent).attr('data-style-scope', 'element_' + props.type + '__' + props.id);
+      $itemContainer.append($elementContentContainer);
       var itemID = item.uniqueID || ((_item$templateData = item.templateData) === null || _item$templateData === void 0 ? void 0 : _item$templateData.uniqueID);
       // Handle the rendering of the template
       item.onTemplateRender() !== undefined && item.onTemplateRender()(item.elementId, $itemContainer.find(".".concat(itemID, "--item")), $content.find(".".concat(itemID, "--item")), _objectSpread(_objectSpread({

modules/src/xibo-player.js

@@ -704,6 +704,30 @@ XiboPlayer.prototype.init = function() {
   // Create global render array of functions
   window.renders = [];
 
+  // If we have scoped styles for elements
+  // convert the CSS rules to use it
+  $(
+    'style[data-style-scope][data-style-target="element"]',
+  ).each((_idx, styleEl) => {
+    const scopeName = $(styleEl).data('style-scope');
+    const styleContent = $(styleEl).html();
+
+    function scopeCSS(css, scope) {
+      return css
+        .split('}')
+        .map((rule) => rule.trim() ? `${scope} ${rule.trim()}}` : '')
+        .join('\n')
+        .trim();
+    }
+
+    $(styleEl).html(
+      scopeCSS(
+        styleContent,
+        '[data-style-scope="' + scopeName + '"]',
+      ),
+    );
+  });
+
   // Loop through each widget from widgetData
   if (widgetData.length > 0) {
     widgetData.forEach(function(inputWidget, widgetIndex) {
@@ -1393,13 +1417,27 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) {
             // Load element functions
             self.loadElementFunctions(groupItem, {});
 
-            (groupItem.hbs) ($groupContent) && $groupContent.append(
-              PlayerHelper.renderElement(
+            if (groupItem.hbs && $groupContent) {
+              const $elementContent = $(PlayerHelper.renderElement(
                 groupItem.hbs,
                 groupItem.templateData,
                 true,
-              ),
-            );
+              ));
+
+              // Add style scope to container
+              const $elementContentContainer = $('<div>');
+              $elementContentContainer.append($elementContent).attr(
+                'data-style-scope',
+                'element_' +
+                groupItem.templateData.type + '__' +
+                groupItem.templateData.id,
+              );
+
+              // Append to main container
+              $content.append(
+                $elementContentContainer,
+              );
+            }
 
             const itemID =
                 groupItem.uniqueID || groupItem.templateData?.uniqueID;
@@ -1427,13 +1465,25 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) {
         // Load element functions
         self.loadElementFunctions(elemObj, {});
 
-        (elemObj.hbs) && $content.append(
-          PlayerHelper.renderElement(
+        if (elemObj.hbs) {
+          const $elementContent = $(PlayerHelper.renderElement(
             elemObj.hbs,
             elemObj.templateData,
             true,
-          ),
-        );
+          ));
+
+          // Add style scope to container
+          const $elementContentContainer = $('<div>');
+          $elementContentContainer.append($elementContent).attr(
+            'data-style-scope',
+            `element_${elemObj.templateData.type}__${elemObj.templateData.id}`,
+          );
+
+          // Append to main container
+          $content.append(
+            $elementContentContainer,
+          );
+        }
 
         const itemID =
           elemObj.uniqueID || elemObj.templateData?.uniqueID;

modules/widget-html-render.twig

@@ -50,11 +50,11 @@
             }
         </style>
         {% if style|length > 0 %}
-        <style type="text/css">
             {% for item in style %}
-            {{ item|raw }}
+                <style type="text/css" data-style-target="{{item.type}}" data-style-scope="{{item.type}}_{{item.dataType}}__{{item.templateId}}">
+                    {{ item.content|raw }}
+                </style>
             {% endfor %}
-        </style>
         {% endif %}
     </head>
     <body>

ui/src/helpers/player-helper.js

@@ -313,11 +313,22 @@ const PlayerHelper = function() {
         }
       }
 
+      const $elementContent = $(self.renderElement(
+        item.hbs,
+        props,
+      ));
+
+      // Add style scope to container
+      const $elementContentContainer = $('<div>');
+      $elementContentContainer.append($elementContent).attr(
+        'data-style-scope',
+        'element_' +
+        props.type + '__' +
+        props.id,
+      );
+
       $itemContainer.append(
-        self.renderElement(
-          item.hbs,
-          props,
-        ),
+        $elementContentContainer,
       );
 
       const itemID = item.uniqueID || item.templateData?.uniqueID;

ui/src/layout-editor/viewer.js

@@ -1892,10 +1892,22 @@ Viewer.prototype.renderElementContent = function(
       $assetContainer.find('[data-style-template=' + template.templateId + ']')
         .length === 0
     ) {
+      function scopeCSS(css, scope) {
+        return css
+          .split('}')
+          .map((rule) => rule.trim() ? `${scope} ${rule.trim()}}` : '')
+          .join('\n')
+          .trim();
+      }
+
       const styleTemplate = Handlebars.compile(
         (stencil?.style) ?
-          stencil.style :
-          '',
+          scopeCSS(
+            stencil.style,
+            '[data-style-scope="' +
+            template.type + '_' + template.dataType +
+            '__' + template.templateId + '"]',
+          ) : '',
       );
 
       $(`<style data-style-template="${template.templateId}">`)

ui/src/templates/viewer-element.hbs

@@ -3,6 +3,7 @@
     data-type="element"
     data-element-type="{{#if element.elementType}}{{element.elementType}}{{else}}global{{/if}}"
     data-sub-type="{{element.id}}"
+    data-style-scope="element_{{#if element.elementType}}{{element.elementType}}{{else}}global{{/if}}__{{element.id}}"
     data-widget-id="{{element.widgetId}}"
     data-region-id="{{element.regionId}}"
     style="