feat(core/validation-tooltip): migrate to shadow dom (#671)

siemens · Aug 7, 2023 · d228212 · d228212
1 parent 0d00293
commit d228212
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -11134,7 +11134,7 @@
           "text": "tooltip-message - Custom tooltip message with html support"
         }
       ],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},

diff --git a/packages/core/src/components/validation-tooltip/validation-tooltip.tsx b/packages/core/src/components/validation-tooltip/validation-tooltip.tsx
@@ -27,7 +27,7 @@ type Position = { x: number; y: number };
 @Component({
   tag: 'ix-validation-tooltip',
   styleUrl: 'validation-tooltip.scss',
-  scoped: true,
+  shadow: true,
 })
 export class ValidationTooltip {
   @Element() hostElement: HTMLIxValidationTooltipElement;
@@ -59,7 +59,7 @@ export class ValidationTooltip {
   private observer: MutationObserver;
 
   get arrow() {
-    return this.hostElement.querySelector('#arrow') as HTMLElement;
+    return this.hostElement.shadowRoot.querySelector('#arrow') as HTMLElement;
   }
 
   get inputElement() {
@@ -71,10 +71,10 @@ export class ValidationTooltip {
   }
 
   get tooltipElement(): HTMLElement {
-    return this.hostElement.querySelector('.validation-tooltip');
+    return this.hostElement.shadowRoot.querySelector('.validation-tooltip');
   }
 
-  private destoryAutoUpdate() {
+  private destroyAutoUpdate() {
     this.tooltipElement.style.display = 'none';
 
     if (this.autoUpdateCleanup) {
@@ -185,7 +185,7 @@ export class ValidationTooltip {
 
   disconnectedCallback() {
     this.observer?.disconnect();
-    this.destoryAutoUpdate();
+    this.destroyAutoUpdate();
 
     this.formElement.removeEventListener('submit', this.onSubmitBind);
     this.inputElement.removeEventListener('focus', this.onInputFocusBind);
@@ -196,7 +196,7 @@ export class ValidationTooltip {
     if (!this.isInputValid) {
       this.applyTooltipPosition();
     } else {
-      this.destoryAutoUpdate();
+      this.destroyAutoUpdate();
     }
   }