javascript - LitElement SVG child 作为插槽

Question

我正在尝试将 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 评论

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

我不认为你可以使用<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>

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