在应用程序外使用 Polymer <app-route> 元素？答案

【问题标题】：Using Polymer <app-route> element outside an app?在应用程序外使用 Polymer <app-route> 元素？
【发布时间】：2017-11-16 05:35:49
【问题描述】：

我正在构建一个使用 Polymer Elements 的网站（不是单页应用程序）。网站“app”不包含在<dom-module> 中，但我仍然想使用<app-route> 元素。

如何在不创建包含整个网站的自定义“应用程序元素”的情况下做到这一点（我尝试将其全部放入 <dom-module> 但出现大量错误）？

如果我只是在<body> 标签中使用<app-route> 和<app-location>，我会得到一个

Uncaught TypeError: Cannot read property 'length' of undefined

即使我尝试以编程方式绑定 route/data/tail 属性，而不是使用例如route="{{route}}".

【问题讨论】：

您没有指定您的 Polymer 版本，但如果我理解正确，您正在寻找的内容可能类似于 dom-bind?它的行为类似于普通的聚合物元素，但没有可见的结构。 polymer-project.org/1.0/docs/api/elements/dom-bind

标签： polymer polymer-2.x polymer-elements app-route

【解决方案1】：

不在另一个 Polymer 托管元素的上下文中的 Polymer 元素从浏览器的角度来看只是自定义标签。它们中的每一个都被封装并具有自己独立的内部上下文，并且设计元素除了通过发送事件之外不与外部上下文交互。

Polymer 实现了一种中介模式，因此元素不会直接通信，即使它看起来是这样，而是有各种观察者设置了隐含性。因此，要使这种通信真正发生，您需要确保您的元素被包装在某种 Polymer 管理的元素中 - 在您的情况下，这可能是 Kuba Šimonovský 一个 dom-bind 辅助元素所指出的。

如果出于某种原因您不想使用该元素，您可以为您的元素实现自己的事件驱动调解器（不推荐）。

【讨论】：