Theming API: Add `unstyled` check to decide whether theme can be loaded or not

components/lib/basecomponent/BaseComponent.vue

@@ -33,6 +33,9 @@ export default {
                 if (!newValue) {
                     BaseComponentStyle.loadStyle(this.$styleOptions);
                     this.$options.style && this.$style.loadStyle(this.$styleOptions);
+                } else {
+                    // load theme
+                    this._loadThemeStyles();
                 }
             }
         }
@@ -108,6 +111,8 @@ export default {
             ObjectUtils.isNotEmpty(globalCSS) && BaseStyle.loadStyle(globalCSS, { name: 'global', ...this.$styleOptions });
         },
         _loadThemeStyles() {
+            if (this.isUnstyled) return;
+
             // common
             if (!Theme.isStyleNameLoaded('common')) {
                 const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.() || {};

components/lib/basedirective/BaseDirective.js

@@ -84,6 +84,8 @@ const BaseDirective = {
         ThemeService.on('theme:change', () => BaseDirective._loadThemeStyles(el.$instance, { nonce: config?.csp?.nonce }));
     },
     _loadThemeStyles: (instance = {}, useStyleOptions) => {
+        if (instance?.isUnstyled()) return;
+
         // common
         if (!Theme.isStyleNameLoaded('common')) {
             const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.() || {};
@@ -181,6 +183,7 @@ const BaseDirective = {
                 handleHook('beforeUpdate', el, binding, vnode, prevVnode);
             },
             updated: (el, binding, vnode, prevVnode) => {
+                BaseDirective._loadStyles(el, binding, vnode);
                 handleHook('updated', el, binding, vnode, prevVnode);
             },
             beforeUnmount: (el, binding, vnode, prevVnode) => {