ЛитЭлемент SVG детский как слот - PullRequest
Новая
       23

ЛитЭлемент SVG детский как слот

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

Я пытаюсь использовать Lit-Element с одним слотом, обернутым элементом SVG.

Но кажется, что <slot>, расположенный в <svg>, не принимает рендеринг заданных элементов SVG.

Что не работает в пользовательском компоненте: 

render() {
  return html`
  <svg>
    <slot><circle id="defaultCircle" cx=... cy=...></circle></slot>
  </svg>`
}

Вот пример: https://stackblitz.com/edit/wy6bhj?file=index.html

Есть идеи почему?Есть альтернатива?

2019-02-18 КОММЕНТАРИИ

Джастин Фагнани рекомендовал использовать <foreignObject> для смешивания HTML (то есть слота) с SVG.К сожалению, это не работает, потому что в слоте все еще остаются элементы SVG.

2019-02-19 ОБНОВЛЕНИЕ

Использование JavaScript-выражения внутри функции render()Я пытаюсь использовать this.children для итерации и добавления детей в шаблон.Теперь с помощью инспектора он отображается правильно в DOM, но элемент SVG ничего не отображает.Я заблудился и не могу понять, почему круг не отображается.

https://stackblitz.com/edit/wy6bhj-hne7wl?file=my-element.js

2019-02-19 UPADTE2

Я наконец понял, что не могу сделать это так, как первоначально хотел,Я решил передать SVG-контейнер как есть. 

<my-element>
  <svg> ... </svg>
</my-element>

Затем <my-element> использует 

const SVG_CONTAINER = this.children[0]
const NODES = SVG_CONTAINERS.children

Для вычисления.И вуаля!

1 Ответ

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

Я не думаю, что вы можете использовать <slot> в SVG

Упрощение вашего кода только для того, чтобы посмотреть, что работает.

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

class MyElement extends HTMLElement {
  constructor() {
    super();
    const s = this.attachShadow({mode:'open'});
    s.innerHTML = `<div>Your SVG</div>
      <div style="border:1px solid blue;width:20px;height:20px;"><slot></slot></div>`;
  }
}
customElements.define('my-element', MyElement);
<my-element>
<svg height="20" width="20">
<circle cx=10 cy=10 r=10 fill=red></circle>
</svg>
</my-element>

Теперь давайте попробуем сделать это с svg, а не с div: 

class MyElement extends HTMLElement {
  constructor() {
    super();
    const s = this.attachShadow({mode:'open'});
    s.innerHTML = `<div>Your SVG</div>
      <svg height="20" width="20" style="border:1px solid blue;"><slot></slot></svg>`
  }
}
customElements.define('my-element', MyElement);
<my-element>
<circle cx=10 cy=10 r=10 fill=red></circle>
</my-element>

Если вы покопаетесь в Dev Tools, вы увидите, что SVG отказывается принимать тег слота как дочерний.Я не думал, что SVG учитывает <slot>, и не уверен.Я просто не думаю, что вы можете сделать это так, как вы хотите.

...