3

我正在尝试将 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 建议使用 a<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

计算事物。瞧！

4

2 回答 2

4

我认为您不能<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>我不确定。我只是不认为你可以按照你想要的方式做到这一点。

于 2019-02-18T23:51:18.477 回答
1

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

附图

于 2021-02-23T18:54:42.883 回答