diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/validation/valformmanager.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/validation/valformmanager.directive.js
index d91234e583..47f1145600 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/validation/valformmanager.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/validation/valformmanager.directive.js
@@ -42,7 +42,7 @@ function valFormManager(serverValidationManager, $rootScope, $timeout, $location
             }));
         };
 
-        this.showValidation = $scope.showValidation === true;
+        this.isShowingValidation = () => $scope.showValidation === true;
 
         this.notify = function () {
             notify($scope);
@@ -136,7 +136,7 @@ function valFormManager(serverValidationManager, $rootScope, $timeout, $location
             var isSavingNewItem = false;
 
             //we should show validation if there are any msgs in the server validation collection
-            if (serverValidationManager.items.length > 0 || (parentFormMgr && parentFormMgr.showValidation)) {
+            if (serverValidationManager.items.length > 0 || (parentFormMgr && parentFormMgr.isShowingValidation())) {
                 element.addClass(SHOW_VALIDATION_CLASS_NAME);
                 scope.showValidation = true;
                 notifySubView();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
index edf234455e..360eeed8c0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
@@ -1,6 +1,6 @@
 <div class="blockelement-inlineblock-editor"
         ng-controller="Umbraco.PropertyEditors.BlockEditor.InlineBlockEditor as vm"
-        ng-class="{ '--error': blockRowForm.$invalid }">
+        ng-class="{ '--error': parentForm.$invalid && valFormManager.isShowingValidation() }">
     <button type="button" class="btn-reset umb-outline blockelement__draggable-element"
             ng-click="vm.openBlock(block)"
             ng-focus="block.focus">
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html
index 712cd1eff8..4aacc32c62 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html
@@ -1,7 +1,7 @@
 <button type="button" class="btn-reset umb-outline blockelement-labelblock-editor blockelement__draggable-element"
         ng-click="api.editBlock(block, block.hideContentInOverlay, index, parentForm)"
         ng-focus="block.focus"
-        ng-class="{ '--active': block.active, '--error': blockRowForm.$invalid }"
+        ng-class="{ '--active': block.active, '--error': parentForm.$invalid && valFormManager.isShowingValidation() }"
         val-server-property-class="">
     <i class="icon {{block.content.icon}}"></i>
     <span>{{block.label}}</span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html
index 475c29b96a..62f4627aad 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html
@@ -1,16 +1,7 @@
 <ng-form name="vm.blockRowForm" val-server-match="{ 'contains' : vm.layout.$block.content.key }">
     <div class="umb-block-list__block" ng-class="{'--active':vm.layout.$block.active}">
 
-        <umb-block-list-scoped-block ng-if="vm.layout.$block.config.stylesheet"
-                                     class="umb-block-list__block--content blockelement__draggable-element"
-                                     view="{{vm.layout.$block.view}}"
-                                     stylesheet="/{{::vm.layout.$block.config.stylesheet}}"
-                                     api="vm.blockEditorApi"
-                                     block="vm.layout.$block"
-                                     index="vm.index"
-                                     parent-form="vm.blockRowForm">
-        </umb-block-list-scoped-block>
-        <umb-block-list-block ng-if="!vm.layout.$block.config.stylesheet"
+        <umb-block-list-block stylesheet="{{::vm.layout.$block.config.stylesheet}}"
                               class="umb-block-list__block--content"
                               view="{{vm.layout.$block.view}}"
                               api="vm.blockEditorApi"
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js
index da4fc9cff8..32253356ee 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js
@@ -198,7 +198,8 @@
                     });
                 });
             }
-            
+
+            // TODO: Why is there a '/' prefixed? that means this will never work with virtual directories
             block.view = (block.config.view ? "/" + block.config.view : getDefaultViewForBlock(block));
 
             block.hideContentInOverlay = block.config.forceHideContentEditorInOverlay === true || inlineEditing === true;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistblock.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistblock.component.js
index afe389ef6f..4474dbd55c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistblock.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistblock.component.js
@@ -5,35 +5,63 @@
      * @ngdoc directive
      * @name umbraco.directives.directive:umbBlockListBlock
      * @description
-     * The component for a style-inheriting block of the block list property editor.
+     * The component to render the view for a block. 
+     * If a stylesheet is used then this uses a ShadowDom to make a scoped element.
+     * This way the backoffice styling does not collide with the block style.
      */
     
     angular
         .module("umbraco")
         .component("umbBlockListBlock", {
-            template: '<div ng-include="model.view"></div>',
             controller: BlockListBlockController,
             controllerAs: "model",
             bindings: {
+                stylesheet: "@",
                 view: "@",
                 block: "=",
                 api: "<",
                 index: "<",
                 parentForm: "<"
+            },
+            require: {
+                valFormManager: "^^valFormManager"
             }
         }
     );
 
-    function BlockListBlockController($scope) {
+    function BlockListBlockController($scope, $compile, $element) {
         var model = this;
+
         model.$onInit = function () {
-            // Ugh, due to the way we work with angularjs and property editors not being components and needing to use ng-include,
-            // it means we need to expose things directly on the $scope so they can use them.            
+            // This is ugly and is only necessary because we are not using components and instead 
+            // relying on ng-include. It is definitely possible to compile the contents
+            // of the view into the DOM using $templateCache and $http instead of using 
+            // ng - include which means that the controllerAs flows directly to the view. 
+            // This would mean that any custom components would need to be updated instead of relying on $scope. 
+            // Guess we'll leave it for now but means all things need to be copied to the $scope and then all 
+            // primitives need to be watched.
 
             $scope.block = model.block;
             $scope.api = model.api;
             $scope.index = model.index;
             $scope.parentForm = model.parentForm;
+            $scope.valFormManager = model.valFormManager;
+
+            if (model.stylesheet) {
+                // TODO: Not sure why this needs a prefixed /? this means it will never work in a virtual directory
+                model.stylesheet = "/" + model.stylesheet;
+                var shadowRoot = $element[0].attachShadow({ mode: 'open' });
+                shadowRoot.innerHTML = `
+                    <style>
+                    @import "${model.stylesheet}"
+                    </style>
+                    <div ng-include="'${model.view}'"></div>
+                `;
+                $compile(shadowRoot)($scope);
+            }
+            else {
+                $element.append($compile('<div ng-include="model.view"></div>')($scope)); 
+            }
         };
 
         // We need to watch for changes on primitive types and upate the $scope values.
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistscopedblock.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistscopedblock.component.js
deleted file mode 100644
index 2a6a185c0d..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistscopedblock.component.js
+++ /dev/null
@@ -1,59 +0,0 @@
-(function () {
-    "use strict";
-
-    /**
-     * @ngdoc directive
-     * @name umbraco.directives.directive:umbBlockListScopedBlock
-     * @description
-     * The component for a style-scoped block of the block list property editor.
-     * Uses a ShadowDom to make a scoped element.
-     * This way the backoffice styling does not collide with the block style.
-     */
-    
-    angular
-        .module("umbraco")
-        .component("umbBlockListScopedBlock", {
-            controller: BlockListScopedBlockController,
-            controllerAs: "model",
-            bindings: {
-                stylesheet: "@",
-                view: "@",
-                block: "=",
-                api: "<",
-                index: "<",
-                parentForm: "<"
-            }
-        }
-    );
-
-    function BlockListScopedBlockController($compile, $element, $scope) {
-        var model = this;
-        model.$onInit = function() {
-            // Ugh, due to the way we work with angularjs and property editors not being components and needing to use ng-include,
-            // it means we need to expose things directly on the $scope so they can use them.
-            
-            $scope.block = model.block;
-            $scope.api = model.api;
-            $scope.index = model.index;
-            $scope.parentForm = model.parentForm;
-
-            var shadowRoot = $element[0].attachShadow({mode:'open'});
-            shadowRoot.innerHTML = `
-                <style>
-                @import "${model.stylesheet}"
-                </style>
-                <div ng-include="'${model.view}'"></div>
-            `;
-            $compile(shadowRoot)($scope);
-        }
-
-        // We need to watch for changes on primitive types and upate the $scope values.
-        model.$onChanges = function (changes) {
-            if (changes.index) {
-                $scope.index = changes.index.currentValue;
-            }
-        }
-    }
-        
-
-})();