问题标签 [web-component]

当前开发的 Web 组件规范的一部分是可以创建自己的 HTML 元素，例如通过调用 new document.register. 这里给出了一个例子：https ://github.com/mozilla/web-components/blob/master/demo/demo.html

如您所见，一个新x-bar元素是通过从 HTML span 元素的原型继承其原型来创建的。

现在我在 Firefox Nightly 中尝试了以下操作（document.register顺便说一句，有支持）：

input我一直认为这将是扩展/自定义普通元素的行为或外观的第一步。

但是，当我运行类似的东西时x.value，浏览器的 Javascript 引擎会抛出一个TypeError: Value does not implement interface HTMLInputElement.

现在我有点卡住了。这是当前实现或规范的限制吗？

我需要在我的网页上管理多个 Web 组件的全局状态。（例如，每个 Web 组件都有一个“选择”按钮/功能，我会跟踪组件以确保一次只选择一个组件。）

为了管理我的组件的全局状态，每个 Web 组件都向我的主 Web 应用程序中的一个公共处理程序提供一个事件流。不幸的是，我需要我的处理程序知道它是从哪个流/Web 组件调用的，以便管理全局状态。我的处理程序如何获取此信息？

这是我的示例代码：

假设我<input>在 HTML 页面上有一个元素。当我填写一个值，导航到另一个页面并返回时，通常会恢复该值：

1）在Firefox中，由于BFCache，整个页面状态正在恢复：https ://developer.mozilla.org/en-US/docs/Working_with_BFCache 。（这意味着甚至正在恢复正在运行的脚本的状态。）

2) 在 Chrome 中，快速页面缓存似乎不起作用（因此页面被重置为原始状态），但输入字段的值正在保留。

现在，如果我<input>通过脚本动态添加一个字段，在 Firefox 中该值仍将被恢复（因为所有内容都在恢复中）。

然而，在 Chrome 中，创建该<input>字段的 Javascript 必须再次运行，因此该输入字段对引擎来说显示为全新的，这意味着不会恢复任何值。

所以我的问题是：如何使用动态生成<input>的 s 实现 Chrome 的功能 2）（或者如何给 Chrome 一个关于输入字段身份的提示）。

（我对这一切感兴趣的一个原因是建议的自定义元素：https ://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html 。使用这个或polyfills https://github.com/mozilla/web-components/blob/master/src/document.register.js或https://github.com/Polymer/CustomElements表示将创建很多（输入）以编程方式的元素并为了获得良好的用户体验，它们应该作为内置元素工作。）

这个问题更针对用户创建的影子 DOM 元素，但为了便于访问，我将使用date输入类型来回答这个问题：

比如说我date在我的页面上有一个输入。编辑了一些位，这个（使用 Chrome）的影子 DOM 标记看起来像：

与输入关联的方法和属性date似乎根本没有引用影子 DOM ( JSFiddle )，所以我想知道如何（如果有的话）可以访问这些影子 DOM 元素？

Google 在 I/O 2013 上引入了对Web Components的支持。它允许我们制作可重用的 HTML 模块以插入到网页中。<iframe>但今天我们可以使用-s、隐藏的<div>-s、AJAX、JavaScript 模板（如 EJS 或 mustache.js，甚至 XSLT）将这些小部件嵌入客户端。<iframe sandbox>我们甚至可以使用Google Caja 或 Microsoft Web Sandbox将它们放入沙盒中。Web Components 有什么特别之处以至于我们应该使用它？

我正在尝试使用将 HTML 文档导入到我的主文档中

但它似乎没有工作。

我正在关注此演示文稿，使用 Chrome 28，并在以下位置启用了这两个标志about:flags：

我错过了什么吗？还是我需要启用另一个标志才能获得它？

当我用 dart 编译 WebComponents 时，我得到了这个自动生成的代码：

使用此代码，如果我更改 nodes-tree in document，标记的行将选择错误的节点！

我可以做些什么来解决这个问题吗？

我有一个现有的DetailController并且DetailView在我的应用程序中有一些非常复杂的 UI/数据操作逻辑（热键、复制粘贴、复制、自动完成等）——视图将 UI 事件发送到控制器；控制器处理逻辑。

我想将其转换为 Ember 组件。

1. 这是否基本上意味着我将视图和控制器合并到DetailComponent？这对我来说似乎很混乱和错误。
2. 如果不是，我如何在组件内部使用控制器和视图？也就是说，我仍然想要组件的完全隔离和定义良好的公共接口，但是在组件内部，我想使用控制器和视图进行组织。那可能吗？
3. 是否可以在组件模板中使用{{render}}, {{view}}, ？{{partial}}

Angular 的指令和“web-components”之间有明显的相似之处，尽管我不确定 Angular 是否以同样的方式利用 shadow-dom。我想我想知道 Angular 在未来几年将如何发展以支持或增强 Web 组件的概念。

如何/（或只是“是吗？”）创建一个 Web 组件，该组件可以放置在表单中并充当任何输入元素，在提交时发送到服务器？换句话说，可以使用 Web Components 来创建自定义输入元素吗？