LitElement SVG 子作为插槽

Question

我正在尝试将 Lit-Element 与由 SVG 元素包裹的单个插槽一起使用。

但似乎位于<svg> 中的<slot> 不接受渲染给定的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 评论

Justin Fagnani 建议使用<foreignObject> 将 HTML（即插槽）与 SVG 混合。不幸的是，这不起作用，因为在插槽中它仍然是 SVG 元素。

2019-02-19 更新

使用 render() 函数中的 JavaScript 表达式，我尝试使用 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

计算事物。瞧！

Answer 1

我认为你不能在 SVG 中使用 <slot>

简化您的代码只是为了看看什么是有效的。

下面是一个原生自定义元素，可让您嵌入内部内容。内部内容是 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>

如果您深入研究开发工具，您会发现 SVG 拒绝接受作为子项的插槽标签。我不认为 SVG 允许 <slot> 并且我不确定。我只是不认为你可以按照你想要的方式做到这一点。

Answer 2

svg 需要渲染的时间。这是您问题的替代方法。您可以使用生命周期来解决。但理想情况下，您需要采取另一种方法。每个 svg 都应该被竞争，并且 svg 可以有多个 svg。例如，您可以将 svg 作为图标。一盏 svgs 是一个图标集，它是您的组件。

Attached image