стиль тени не отображается - PullRequest
Новая
       49

стиль тени не отображается

0 голосов
/ 28 февраля 2019

Веб-компонент, созданный с помощью этого, неправильно обрабатывает стиль: 

connectedCallback() {
  const shadowRoot = this.attachShadow({ mode: 'open' });
  this.svg = document.createElement('svg');
  this.svg.style = `
    height: 80px;
    width: 80px;
    background-color: beige;
  `;
  shadowRoot.appendChild(this.svg);
}

Однако атрибут style показывает правильные данные в Chrome DevTools.Если я переписываю логику таким образом, появляется стиль. 

connectedCallback() {
  const shadowRoot = this.attachShadow({ mode: 'open' });
  let htmlHolder = document.createElement('template');
  htmlHolder.innerHTML = `<svg></svg>`;
  shadowRoot.appendChild(htmlHolder.content.cloneNode(true));
  this.svg = shadowRoot.querySelector('svg');
  this.svg.style = `
      height: 80px;
      width: 80px;
      background-color: beige;
  `;
}

Я не уверен, почему эти два ведут себя по-разному.

1 Ответ

0 голосов
/ 28 февраля 2019

Если вы определяете элемент SVG с помощью createElement, вы должны установить конкретное пространство имен SVG, которое равно http://www.w3.org/2000/svg.

Затем необходимо использовать метод createElementNS(): 

this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
...