fix(select-setting): listen closest root only for theme changes

src/plugins/header/options/option/theme.less

@@ -50,6 +50,7 @@
       }
 
       &.uip-settings {
+        accent-color: @light-text;
         .uip-select-setting .esl-select .esl-select-renderer::after {
           color: @light-text;
         }

src/plugins/settings/setting.ts

@@ -6,6 +6,7 @@ import {memoize} from '@exadel/esl/modules/esl-utils/decorators/memoize';
 import {ChangeAttrConfig, UIPStateModel} from '../../core/base/model';
 import {UIPSettings} from './settings';
 import {WARNING_MSG} from '../../utils/warning-msg';
+import {getAttr, setAttr} from '@exadel/esl/modules/esl-utils/dom/attr';
 
 /**
  * Custom element for manipulating with elements attributes.
@@ -19,7 +20,11 @@ export abstract class UIPSetting extends ESLBaseElement {
   @attr() public attribute: string;
   /** Target to which setting's changes are attached. */
   public get target(): string {
-    return this.getAttribute('target') || this.$settings.target;
+    return getAttr(this, 'target', this.$settings.target);
+  }
+
+  public set target(target: string) {
+    setAttr(this, 'target', target);
   }
 
   @memoize()

src/plugins/settings/settings.less

@@ -4,6 +4,7 @@
   max-width: 250px;
   overflow: hidden;
   transition: max-width 0.3s ease-in-out;
+  accent-color: @dark-text;
   // grid-column-start: 2;
   // grid-row-start: 2;
   // grid-row-end: span 3;

src/settings/select-setting/select-setting.ts

@@ -167,7 +167,7 @@ export class UIPSelectSetting extends UIPSetting {
     this.select.remove(this.settingOptions.indexOf(UIPSelectSetting.inconsistentValue));
   }
 
-  @listen({event: 'uip:configchange', target: '.uip-root'})
+  @listen({event: 'uip:configchange', target: '::parent(.uip-root)'})
   protected onRootThemeChange(e: CustomEvent): void {
     if (e.detail.attribute !== 'dark-theme') return;
     let dropdownClass = UIPSelectSetting.dropdownClass;