LitElement Как контролировать дом ребенка и менять стиль - PullRequest
Новая
       17

LitElement Как контролировать дом ребенка и менять стиль

1 голос
/ 25 апреля 2019

Итак, у меня есть пользовательский элемент, и мне нужно обновить его стили на основе изменения его дочернего содержимого. Например: 

<my-element>
  <!-- When child content here changes I want to update styling --!>
</my-element>

Как бы я отслеживал изменения DOM в дочернем контенте в моем элементе? Например, допустим, что если дочерний контент содержал строку где-либо со словом «привет», то я бы изменил стиль пользовательского элемента: 

<my-element>
  <span>Hello in <b>advance</b>!!!</span>
</my-element>

Обычно я бы использовал здесь наблюдателя мутаций и сканировал дом, когда произошли изменения, не уверенный, как это сделать правильно с lit-element

Заранее спасибо!

UPDATE

Итак, я взломал решение, используя наблюдателя мутаций. Мысли? * * 1013 

firstUpdated() {
              var shadow = this.shadowRoot;
              var observer = new MutationObserver(function(mutations) {
                  mutations.forEach(function(mutation) {
                      console.log(mutation);
                  });
              });

// configuration of the observer:
              var config = { attributes: true, childList: true, characterData: true, subtree: true }

// pass in the target node, as well as the observer options
              observer.observe(shadow, config);
          }

1 Ответ

0 голосов
/ 03 мая 2019

Как правило, вы не должны делать что-то подобное. Если изменение DOM было вызвано наблюдаемым изменением свойства, вы можете просто сделать любые необходимые изменения в функции рендеринга. Если это не наблюдаемое изменение, вы можете вызвать requestUpdate для принудительного рендеринга.

...