Question

我正在尝试制作一个聚合物3元素，该元素围绕Jan Marthedal Rasmussen定义的<math-tex> element。不幸的是，我无法使用模板中的<slot></slot>语法将适当的内容填充到元素中，我也不知道为什么。

新元素在文件中定义

tve-inline-equation.js

import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0/polymer-element.js';
// import 'https://unpkg.com/@polymer/iron-flex-layout@3.0.1/iron-flex-layout-classes.js';

class TVEInlineEquation extends PolymerElement {
  static get template() {
    return html`
<math-tex><slot>0</slot></math-tex>
`;
  }
}

customElements.define('tve-inline-equation', TVEInlineEquation);

该元素在文档中经过测试

index.html

<!DOCTYPE html>

<html>
  <head>
    <!-- https://github.com/janmarthedal/math-tex -->
    <script src="math-tex.js"></script>
    <script src="math-tex-controller.js"></script>
    <script type="module" src="tve-inline-equation.js"></script>
  </head>
<body>

<p>Place for an inline equation, using my custom html 
element tve-line-equation.</p>
<tve-inline-equation>c = \sqrt{a^2 + b^2}</tve-inline-equation>
<p>The problem is that the equation is not rendered 
and the "0" from the default slot value is inserted instead.</p>

<p>A new location for an equation, this time directly in
a math-tex element.</p>
<math-tex>c = \sqrt{a^2 + b^2}</math-tex>

</body>
</html>

可在plunker上找到带有代码的在线游乐场。

让我烦恼的另一件事是，在导入iron-flex-layout时，等式的文本表示形式会显示在屏幕上，而不是插槽的默认内容。

聚合物3，模板中的插槽元素未填充

0 个答案: