Стиль CSS не применяется к пользовательскому компоненту - PullRequest
Новая
       19

Стиль CSS не применяется к пользовательскому компоненту

0 голосов
/ 19 сентября 2019

Я создал пользовательский веб-компонент (без каких-либо рамок).Затем я заполняю его содержимым из тега шаблона.

Наконец, я редактирую содержимое, используя Javascript.Это отлично работает.Что не работает, так это редактирование стилей с использованием Javascript.Почему так, и как я могу редактировать CSS внутри веб-компонента, используя код? 

class GeneratorView extends HTMLElement {

    connectedCallback() {

        // Use a template to fill this component
        const template = document.getElementById('generator-template')
        const templateContent = template.content
        this.appendChild(templateContent)

        // find the label tag in this component
        const label = this.querySelector("#label")

        // THIS WORKS - set the label text
        label.innerText = "The text has changed"

        // THIS DOESN'T WORK - set the label style
        label.style.border = "4px solid red;"
    }
}

customElements.define('generator-view', GeneratorView)

Шаблон выглядит примерно так 

<template id="generator-template">
        <div id="label">
            Change this text
        </div>
</template>

1 Ответ

1 голос
/ 19 сентября 2019

Проблема в том, что вы добавляете точку с запятой в свой стиль.

Точка с запятой используется только синтаксическим анализатором CSS, чтобы узнать разрывы между значениями CSS.Вам не нужно одно после последнего значения, и вы не можете использовать их при установке значения в атрибуте стиля элемента.

Я упростил ваш код для демонстрации.

С точкой с запятой

const template = `<div id="label">Change this text</div>`;

class GeneratorView extends HTMLElement {
  connectedCallback() {
    this.innerHTML = template;
    const label = this.querySelector("#label");
    label.innerText = "The text has changed";
    label.style.border = "4px solid red;"
  }
}

customElements.define('generator-view', GeneratorView);
<generator-view></generator-view>

Без точки с запятой 

const template = `<div id="label">Change this text</div>`;

class GeneratorView extends HTMLElement {
  connectedCallback() {
    this.innerHTML = template;
    const label = this.querySelector("#label");
    label.innerText = "The text has changed";
    label.style.border = "4px solid red";
  }
}

customElements.define('generator-view', GeneratorView);
<generator-view></generator-view>
...