Веб-компонент: обновление переменной, используемой в стилях теневого домена - PullRequest
Новая
       36

Веб-компонент: обновление переменной, используемой в стилях теневого домена

0 голосов
/ 06 октября 2019

Я хочу динамически обновить стиль (в частности, свойство 'right: (value);') в веб-компоненте для его анимации.

Сценарий: веб-компонент (совместно взятый квадрат)генерирует, а затем переходит к перемещению вправо со статической скоростью (скажем, 10 пикселей, каждые 500 мс).

Резюме, я хочу иметь привязку данных к переменной, которая используется в литерале шаблона (или другом решении)в моем стилевом стиле.

Я могу добиться этого с помощью встроенных стилей, но не буду использовать встроенные стили для самого компонента. Свойство обновляется (подтверждается при регистрации), но в соответствии с этот вопрос: «Обновление переменных внутри литералов шаблона js» кто-то правильно заметил, что «В vanilla JavaScript и шаблонных литералах нет привязки один разпоколение «. 

class Square extends HTMLElement {
    constructor() {
        super();
        this._squareRight = 0;
        this._squareTop = '0px';
        this.attachShadow({
            mode: 'open'
        });
}

connectedCallback() {
    this.shadowRoot.innerHTML = `
        <style>
            div.square {
                position: absolute;
                top: ${ this._squareTop };
                right: ${ this._squareRight + 'px' };
            }
        </style>
        <div class="square"></div>
    `
}

animateSquare(){
    // this gets called by a separate timing function
    this._squareRight += 10;
}

Вопрос: БЕЗ использования другой библиотеки (есть такие, которые там обрабатывают привязку данных), есть ли решение для этого? Доступно ли единственное решение для использования встроенного стиля? Возможно переменные CSS (это делается только в chrome, так что это опция)?

* edit: добавлены переменные CSS к вопросу

...