问题标签 [custom-element]

我正在使用用 vanilla JavaScript（无框架）实现的 HTML5 Web 组件（HTML 导入、影子 DOM、模板和自定义 HTML 元素）设计一个 Web 应用程序。Web 应用程序相当简单，并且必须作为单页应用程序来实现。应用程序的部分要求是用户界面应该是可定制的。

设计方法

该示例使用<application-navigation>自定义元素。new CustomEvent('application-navigation', {location:'/sign-in'})该元素通过自定义事件（例如）和方法调用（例如）与“顶级”JavaScript（例如，JavaScript MV* 用语中的“路由器”）进行通信document.querySelector('application-navigation').enableSignOut()。本质上，自定义事件和方法构成了元素的“公共 API”。

可以使用不同的 HTML 导入将自定义<application-navigation>元素包含在应用程序中。例如，使用<link rel="import" href="default/application-navigation.html"/>或<link rel="import" href="my_cool_theme/application-navigation.html"/>。只要 HTML 导入具有相同的方法并产生相同的自定义事件，应用程序就应该以相同的方式运行，而不管正在使用什么用户界面自定义。

这种设计的主要好处是它通过允许非常可定制的用户界面来满足要求 - 内部 JavaScript 事件、CSS 和（影子）DOM 结构可以在模板之间完全不同。它还允许在适当的时候重用现有的库。例如，默认<application-navigation>元素可以使用来自 Twitter Bootstrap 的下拉 HTML 标记，而主题版本可以使用 Foundation 库。

但是，这个组件不是很通用。它实现了一个相当特定的目的（控制导航请求），不像一个<application-dropdown>元素（尽管该<application-navigation>元素可以使用一个（可定制的）<application-dropdown>元素）。

重述问题

我的问题是，是否应该创建自定义元素来实现特定目的、更通用的目的，或者目的的广度是否无关紧要？

考虑以下自定义聚合物元素的用法

在这里，我将两个变量绑定到自定义元素app-header。现在，当我想更新值时，您可能希望按如下方式执行此操作（在app-header！的父级中）：

但是，这只会更新appTitlenot abc.def.ghi。为了也更新此值，您需要执行以下操作：

如果有人知道这是为什么，请告诉我！！

无论如何，正因为如此，我想使用Immutable！但是，这引入了一些数据如何绑定到自定义元素的问题

这是一个示例片段：

所以在将数据绑定到元素时会出现问题：

这样的事情是可能的还是我在做其他完全错误的事情？

我在聚合物应用程序的几个地方使用了纸质下拉菜单。它在最顶层的文件（index.php）中效果很好。但不知何故，它不适用于所有自定义元素。我一定是做错了什么，因为我在网上找不到其他人抱怨这个问题。有人可以看看这个元素并告诉我它是否正确吗？

我正在使用本机实现创建一个 Web 组件，它的 html 模板中包含指向图像的链接。但是，这些链接仅在它们是绝对的或相对于主文档时才有效，这意味着该组件不可重用或可移植。此外，这是非常违反直觉的。

目前，我为所有需要使用图像的元素添加了一个 data-url_prefix 属性。然后，在为我的自定义元素创建影子根时，我将 {{URL_PREFIX}} 替换为该参数的值。

我的解决方案似乎很糟糕。如果您提供更好的建议，我将非常高兴，谢谢。

我在http://webcomponents.org/polyfills/html-imports/页面上找到了一个有趣的引用：

填充注意事项

在导入的文档中，HTML 中的 href 和 src 属性以及 CSS 文件中的 url 属性是相对于导入文档的位置，而不是主文档。

为什么 polifill 会使用与本机实现不同的逻辑？

Web 组件 理想情况下应该封装所有依赖项，但是如果 Web 组件需要图像，它应该知道该图像的绝对 URL，这不允许组件在文件结构中简单地移动。

比如说，我有以下结构：

• 索引.html
• css
  • main.css
• js
  • main.js
• web_components
  • cool_web_component
    • cool_web_component.html
    • 图标.png

如果我将其更改为以下内容：

• 索引.html
• css
  • main.css
• js
  • main.js
• cool_web_component
  • cool_web_component.html
  • 图标.png

我需要在这些文件中的某处更改指向 icon.png 的指针我的问题是如何避免它，或者以优雅的方式解决它。另外，为什么实际的本机实现与 polyfill 冲突？

考虑以下test-elementWeb 组件定义（在 Google Chrome 上运行的原生 JavaScript，而不是 Polymer），它创建了一个简单的width=500px. 它的attachedCallback函数将其宽度输出到控制台，然后设置一个异步延迟再次执行此操作：

测试元素.html

然后我创建一个导入的页面test-element，并再次从内联脚本标签输出其宽度：

索引.html

控制台的输出是：

这证明attachedCallback(1) 在布局和绘制之前被调用，有时这确实是我想要的。例如，如果我想将其宽度更改为 100 像素，我可以 make testElement.style.width = "100px"，并且我不必担心组件在回调有机会进行更改之前闪烁其先前的 500px 宽度。

但是，attachedCallback有时在布局之前被调用并不是我想要的。例如，如果test-element包含一个网格，并且它需要绘制单元格，那么我需要知道它的宽度，以便我可以计算有多少单元格适合可用空间。但是我在 期间没有这些信息attachedCallback，我似乎无法掌握如何获取这些信息。

如您所见，在这个非常简单的示例中，0ms 延迟 (2) 似乎触发了布局计算。但是一旦我开始做更复杂的事情（例如当我有嵌套的 Web 组件和异步 HTML 导入时），0ms 延迟是不够的，我必须将其更改为 100ms 延迟，然后更多。

我的问题是：如何尽快可靠地获得组件的宽度（或任何其他计算样式）？

最近，微软开始使用新的X-Tag库来创建自定义元素。该网站说，

X-Tag 是 Microsoft 支持的开源 JavaScript 库，它封装了 W3C 标准 Web 组件系列 API，为快速组件开发提供了一个紧凑、功能丰富的接口。虽然 X-Tag 为所有 Web 组件 API（自定义元素、Shadow DOM、模板和 HTML 导入）提供了功能挂钩，但它只需要自定义元素支持即可运行。在没有原生自定义元素支持的情况下，X-Tag 使用一组与 Google 的 Polymer 框架共享的 polyfill。您可以在 Builds 部分查看我们的包选项

据我记得，就在不久前，甚至Mozilla也有一个类似的项目，名称完全相同X-Tag。

这些项目彼此有何不同？或者他们是同一个项目并更新了品牌？

什么是 ES205 / JS6 方式，制作一个与 DartLang 制作的自定义元素等效的自定义元素

在 Web 组件中，要注册一个元素，您只需键入：

要创建元素，您可以执行以下操作之一：

这一切都很好，花花公子。当您谈论扩展现有元素时，问题就开始了。

问题1：为什么重复？在这里，'button'应该足够了（特别是因为它很容易计算出元素的原型Object.getPrototypeOf(document.createElement(tag));

问题 2：这些信息在内部是如何使用的？例如，如果您有prototype: Object.create(HTMLFormElement.prototype并且extends: 'button'（之后的内容extends与传递的原型不匹配）会发生什么

要创建一个，您可以执行以下操作之一：

问题3：既然x-foo-buttonextends很明显button，为什么我们在使用的时候还要同时指定document.createElement()呢？我怀疑这是因为document.createElement()简单地创建了一个带有 syntax 的标签<button is="x-foo-button"></button>，这让我想到了下一个问题：

问题 4：is语法的意义何在？这样做的实际区别是什么：

和这个：

除了 1）第一种语法需要<button is="x-foo-button"></button>在文档中创建一个实例 2）第二种语法可以用于任何元素，而不仅仅是自定义元素的扩展？

我使用 Aurelia 的 1.0.0-beta.1 并尝试编写一些单元测试。

我有一个这样的customElement：

我想用 Class1&Class2 的 Mocks 和工作的可绑定字段数据创建一个可测试的 MyElement 实例。

到目前为止，我发现的是，由于此处描述的 API 更改，带有 BehaviorInstance 的示例不再起作用。

从 aurelia-template查看测试后，我的方法现在看起来像这样：

它已经在从 DI 容器请求 bindingEngine 或在创建 MyElement-VieModel 时失败了

那么，我该如何做这件事呢？

- - - 编辑：

迈克尔马龙的答案非常完美。对于任何提出这个问题的人，这就是我的示例的工作方式：

使用 x-tag 我试图找到一种方法来扩展我放置is:"ajax-pop"属性的每个 html 元素。

我想要做的是，当我单击具有 is:"ajax-pop" 属性的元素时，我将执行一些动态 ajax 加载。对我来说，开发一个可管理的系统将是一个很好的起点。

我知道我可以用一些不同的方式来做到这一点，但我想知道有没有办法像这样扩展：'每一个原生 html 元素'