无法显示子元素答案

【问题标题】：Cannot display child element无法显示子元素
【发布时间】：2020-06-12 08:08:36
【问题描述】：

我是一名初学者 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 有关系吗？

【问题讨论】：

请原谅这个明显的问题，但是您是在导入 webcomponent 定义吗？
是的，当然。当我从 svg 切换到 div 时，一切似乎都正常。

标签： lit-element lit-html

【解决方案1】：

这是不可能的，因为自定义元素当前位于 HTML 命名空间中，并且无法定义为位于 SVG 命名空间中。见w3c/webcomponents#634

一种解决方法是使用自定义元素并将其放入其中：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

Polymer/lit-element#908

【讨论】：

【解决方案2】：

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

【讨论】：