无法显示子元素

Question

我是一名 lit-element 开发新手，正在尝试解决一个简单的问题。

这是我的 html 页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>LitTest</title>
    <script src="webcomponents/webcomponents-loader.js"></script>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <svg id="canvas" style="width: 100%; height: 100%;">
      <es-postit></es-postit>
    </svg>
  </body>
</html>

这是组件代码：

从 "lit-element";

导入 { LitElement, html, customElement, css }

@customElement("es-postit")
export class PostIt extends LitElement {
  static styles = css`
    rect {
      fill: red;
    }
  `;

  render() {
    console.log("rendering element.");
    return html`<rect x="10" y="10" width="210" height="210" />`;
  }
}

如您所见，没有什么特别之处。问题是，我在页面上看不到该组件。但是，如果我将 index.html 更改为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>LitTest</title>
    <script src="webcomponents/webcomponents-loader.js"></script>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <svg id="canvas" style="width: 100%; height: 100%;">
      <rect x="10" y="10" width="210" height="210" />
    </svg>
  </body>
</html>

然后我就可以在页面上看到矩形了。另外，如果我摆脱所有与 svg 相关的元素并将它们变成 div，一切都很好。与SVG有关吗？

Answer 1

This isn't directly possible because custom elements are currently in the HTML namespace, and can't be defined to be in the SVG namespace. See w3c/webcomponents#634

A workaround is to use and put the custom element inside of it: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

Polymer/lit-element#908

Answer 2

在浏览了 lit-html 文档后，我发现了 svg 模板函数可以满足我的需求。它在 svg 命名空间中呈现模板。

无法显示子元素

Cannot display child element

lit-element

lit-html