问题标签 [custom-element]

我最近开始学习聚合物，并尝试同时使用 iron-ajax iron-list 和模板。由于某种原因，这些值在屏幕上显示为空白，但正在创建卡片。以这个问题为例，我创建了两个聚合物元素搜索列表和搜索卡。用于显示数据的搜索卡和用于获取数据并使用卡填充列表的搜索列表。搜索列表如下：

搜索卡如下：

所有由项目数据组成的跨度字段都显示为空白。我究竟做错了什么 ？如何解决？

是否可以动态加载自定义元素？

假设我的 viewModel 如下所示：

为什么 aurelia 不渲染我的“卡片”。有什么办法可以实现类似的行为？

直接添加这些卡片HTML效果很好，但我需要一种更模块化的方法。

谢谢

我有一个自定义元素，称为x-foo. 我想扩展它，并创建一个x-bar元素：

但它不起作用。无法以这种方式扩展自定义元素。Chrome 发出此错误：

未捕获的 NotSupportedError：无法在“文档”上执行“registerElement”：“x-foo-extended”类型的注册失败。'extends' 中指定的标签名称是自定义元素名称。改用继承。

改用继承？好的，具体怎么样？有什么例子吗？

注意：我没有使用 Polymer。只是 Chrome 中的普通 web 组件，没有 polyfill。

假设我有以下 HTML 代码：

当我循环所有元素时，我想知道元素（例如nav）是本机 HTMLElement 还是创建的（例如my-beautiful-text）。

我已经在谷歌和这里搜索过它，但没有运气。

我的尝试是使用constructorand instanceof，它适用于某些元素，例如span,div等input，但它不适用于某些不覆盖HTMLElement原型的组件。有什么猜测吗？

我遇到了一个问题，即 l20n 仅适用于标准 HTML 元素的默认属性。

就我而言，我正在尝试使用 JSON 格式的翻译。我的虚拟数据如下：

我的测试HMTL如下：

但是，浏览器会生成以下 HTML：

我已经尝试了属性排序和属性名称的各种组合，看起来只有每个元素类型的适当默认 HTML 属性由 l20n 本地化。

当在自定义元素中使用标准 HTML 属性（例如“title”）时，该问题也很明显，尽管 l20n 可以处理标准元素的标准属性（当它们被放置在<content>自定义元素的标记中时）。

围绕其处理属性的 l20n 文档似乎并不十分广泛。到目前为止，在 Stack Overflow 和 Google 上寻找答案已被证明是徒劳的，而 Mozilla 拥有自己的讨论列表和错误跟踪器，公众似乎不太容易获得这些信息。

l20n 项目似乎处于不断变化的状态，在我使用的版本（3.0.5）中，据称与 ES5 兼容的 webcompat/l20n.js 需要 Polyfill，因为它使用了 Array.from(); 此外，示例和学习资源似乎与框架的使用方式不完全匹配。源代码完全没有文档记录，但尽管如此，到目前为止我对框架的大部分理解都是通过查看那里获得的。我在他们的代码中看不到对属性名称的任何过滤，所以我觉得这个问题可能是由于需要在 l20n 传递数据属性之前向浏览器注册元素（及其属性）。

提前感谢任何可能提供帮助的人。

我制作了一个自定义元素，它是一张简单的卡片，上面有一些标题。问题是，我不知道如何声明一个属性，该属性将添加一个 css 类以使每张卡之间的背景图像 url 不同。

我喜欢 Polymer，我可以创造伟大的东西，但我的限制是对 javascript 的了解很少，所以请帮忙？这是一些代码=）

我应该怎么做，带上我的卡片并使它们彼此不同？

我正在尝试观察传递给 Polymer 元素的对象数组的变化。当向数组中添加新项时，Polymer 元素中的数组也会发生变化。但是，观察者方法永远不会被调用。

包含元素

试图在这里观察变化：

首次填充项目数组时首先调用“updateTableItems”方法，但在单击按钮添加更多对象时不会调用。

所以我在我的应用程序中加载一个加载屏幕。link然后我通过在 JavaScript 中创建一个元素来通过 HTML 导入加载我的自定义元素。我需要知道此 HTML 导入何时完成加载以向用户显示内容。下载完成时 HTML 导入会触发事件吗？

我正在写一个聊天。当我在一个 HTML 中编写所有 DOM 模块时，它在 Chrome 中可以正常工作，但 DOM 模块在 Edge 中无法正常工作。但后来我将所有 DOM 模块移到另一个 HTML 文件中。现在它可以在 Edge 中使用。但是现在 Flexbox 并不适用于所有浏览器。

我写了一些示例：

一个 HTML 中的所有 DOM 模块： http ://plnkr.co/edit/m9oKpnV2CWJvVu9Ry3PQ?p=preview

另一个 HTML 中的 DOM 模块： http ://plnkr.co/edit/n2rV8kDravia4CTNOSL5?p=preview

我不知道为什么，但在 Chrome 中，第二个示例可以正常工作，尽管在整个项目中它与 Flexbox 有问题。但是第二个示例在 Edge 中存在相同的问题。见第二张图。

Edge 中的第一个示例（未加载 DOM 模块）：

Edge 中的第二个示例（“flex-basis：0”和“flex-grow：1”不起作用）：

Chrome中的正确结果：

索引.html：

样式.css：

在这个 JSBin中，我需要：

• 将工具栏中的两个按钮与视口的右边缘对齐（右对齐）和
• 将文本垂直对齐到按钮的中间

请提供一个有效的 JSBin 示例来说明如何做到这一点。

代码