问题标签 [web-component]

我正在尝试在我的聚合物元素中创建一个方法/函数，它允许我将属性更改为所有实例，除了单击/点击的实例。

更具体地说，当我单击元素的一个实例时，我想更改它的所有其他实例的 CSS 属性。

图片示例

谢谢！

我想使用当前的 Web 组件规范实现一个列表框小部件。此外，生成的列表框应符合 ARIA 标准。实例化列表框小部件应该很简单：

出于清洁和封装的目的，其他一切都应该在 shadow dom 中渲染。为了实现这个小部件，注册了两个自定义<x-listbox>元素<x-option>。shadow dom 的顶级元素<x-listbox>是 a <div>，它带有role=listbox和aria-activedescendent可访问性的属性（我不希望<x-listbox>元素上有这些属性，因为它们是实现细节。）

为了aria-activedescendent工作，需要选项元素上的 id。将 id 直接放在<x-option>元素上不会起作用，原因有两个：首先，它会污染使用列表框小部件的文档的 id 命名空间。其次，更重要的是，id 不能跨影子边界工作（这是影子 dom 的目的之一），因此选项的 id 必须<div>与aria-activedescendent属性位于相同的影子 dom 中。

一个解决方案是用另一个（属于那个shadow dom）包围<x-option>作为内容呈现在shadow dom中的每个，在其上可以放置一个id。<x-listbox><div>

我的问题是：这是正确的方法吗？如何使用自定义元素和 shadow dom web api 来实现它？

我想知道当我单击另一个元素时如何实例化一个 Polymer元素。有没有办法从dock-icon实例化 window-base？（代码下来）。我虽然可以使用每个元素都有的构造函数，但我不知道它是如何工作的。我如何将变量传递给该构造函数。

涉及的两个元素的代码：

必须实例化的聚合物元素

谢谢

如何获得.content嵌套的JS 访问权限<template>？

我正在尝试<template>使用我的imported-template元素（从外部文件中获取模板内容）进行扩展，并且我想<imported-content>以与 native 类似的方式实现<content>。为此，我只是尝试

但它发生了，嵌套模板this.content是空的。

JSFiddle在这里

我不确定这是错误、设计问题还是只是模板 shim 限制。

我想也许我在错误的生命周期回调中检查它，所以我MutationObserver 在这里尝试了小提琴，但也没有发生突变。

我正在使用 if 模板在 Polymer 元素中显示或隐藏列表中的项目。我的模板基于值列表，并使用参考列表进行过滤。

更新值列表会产生所需的效果。但是，更改过滤器引用列表（此处删除一个元素）不会更新模板。

请参阅http://jsbin.com/vuvikare/4/edit?html，可运行代码的输出。

有没有办法触发这个更新（例如使用 filterChanged 观察者）？

谢谢

Polymer 网站说在 Polymer 中使用“扩展”属性不支持多重继承（或组合）。我希望一个元素由一个 Polymer 元素的一些方法和另一个 Polymer 元素的一些方法组成，以使其反映应用程序逻辑。目前有什么方法可以在 Polymer 中实现它吗？（就像使用 javascript mixins 一样）

谁能告诉我如何根据 Polymer 属性的值导入元素？我以为我可以使用数据绑定，但是......它不起作用。是否可以动态导入元素？

这里的代码示例：

谢谢！

我有一个聚合物元件，里面有一个服装元件。当我单击它时，我想删除所有内容（父母和孩子）。

问题是每次我关闭父元素的实例时都会出错。我认为这与我正在删除一个内部有一个元素的元素有关。

如何正确删除它？

下面是方法代码：

这是我遇到的错误：

这是错误的图像：

所以我正在研究一个应该是响应式的 Polymer 元素。为此，我需要访问当前图像的宽度。

这是我的标记

以及（相关的）样式。

现在我想要的是获得图像的宽度。为此，在我的ready事件中，我添加了这两行：

第一个打印元素就好了，我可以看到clientWidthandoffsetWidth是数字。但第二行打印 0。当我使用 . 时也是如此getComputedStyle()。

我认为这可能是因为图像尚未加载，所以我添加了一个事件处理程序：

但这永远不会受到打击。

我做错了什么，我该如何解决？

您如何/是否可以避免为每个 Web 组件发出服务器请求？

背景

因此，现在很多人都在使用所谓的 AMD 模块加载模型，其中所有模块都是单独的 javascript 文件并根据需要包含在内。例如。

这会导致对服务器的多个请求，每个 javascript 文件一个。这被认为对应用程序性能有害，尤其是在移动设备中，因为 javascript 模块的数量增加了。

因此，诸如 require.js 之类的工具提供了一个编译器，该编译器将自动跟踪依赖关系并生成一个包含所有模块的 javascript 文件；有效地将请求开销减少到单个文件（通常是 app-min.js）。

网页组件

每个 Web 组件都位于一个外部文件岛中，并使用标题中的链接标签导入：

如果您使用聚合物，您可以使用硫化工具来组合聚合物组件（http://www.polymer-project.org/articles/concatenating-web-components.html），但那是因为（据我了解） polymer 是一个 JavaScript 框架，可以从“polymer-element”标签动态加载 Web 组件。

对于不依赖框架（如 x-tag 或聚合物）的“香草”Web 组件，是否有等效的方法来执行此操作？