fix: remove shadowRoot in direction utility (microsoft#4157)

AvishekNath · Dec 3, 2020 · 041ae70 · 041ae70
1 parent b3266fb
commit 041ae70
Showing 1 changed file with 11 additions and 10 deletions.
diff --git a/packages/web-components/fast-foundation/src/utilities/style/direction.ts b/packages/web-components/fast-foundation/src/utilities/style/direction.ts
@@ -42,7 +42,7 @@ export class DirectionalStyleSheetBehavior implements Behavior {
     /**
      * @internal
      */
-    public bind(source: typeof FASTElement & HTMLElement) {
+    public bind(source: FASTElement & HTMLElement) {
         const provider = DesignSystemProvider.findProvider(source);
 
         if (provider !== null) {
@@ -61,18 +61,15 @@ export class DirectionalStyleSheetBehavior implements Behavior {
     /**
      * @internal
      */
-    public unbind(source: typeof FASTElement & HTMLElement) {
+    public unbind(source: FASTElement & HTMLElement) {
         const cache = this.cache.get(source);
 
         if (cache) {
             Observable.getNotifier(cache[0].designSystem).unsubscribe(cache[1]);
         }
     }
 
-    private attach(
-        source: typeof FASTElement & HTMLElement,
-        provider: DesignSystemProvider
-    ) {
+    private attach(source: FASTElement & HTMLElement, provider: DesignSystemProvider) {
         const subscriber = new DirectionalStyleSheetBehaviorSubscription(
             this.ltr,
             this.rtl,
@@ -94,18 +91,22 @@ class DirectionalStyleSheetBehaviorSubscription implements Subscriber {
     constructor(
         private ltr: ElementStyles | null,
         private rtl: ElementStyles | null,
-        private source: HTMLElement
+        private source: HTMLElement & FASTElement
     ) {}
 
     public handleChange(source: any) {
         this.attach(source.direction);
     }
 
     public attach(direction: Direction) {
-        if (this.attached !== this[direction] && this.source?.shadowRoot) {
-            this.attached?.removeStylesFrom(this.source.shadowRoot);
-            this[direction]?.addStylesTo(this.source.shadowRoot);
+        if (this.attached !== this[direction]) {
+            if (this.attached !== null) {
+                this.source.$fastController.removeStyles(this.attached);
+            }
             this.attached = this[direction];
+            if (this.attached !== null) {
+                this.source.$fastController.addStyles(this.attached);
+            }
         }
     }
 }