问题标签 [custom-element]

我一直无法找到自定义标签在 HTML5 中是否有效的明确答案，如下所示：

我在规范中没有发现任何一种方式：

http://dev.w3.org/html5/spec/single-page.html

并且自定义标签似乎无法使用 W3C 验证器进行验证。

我正在尝试序列化一些具有自定义属性（例如 id）的文本节点，这些属性需要以序列化形式保留。

通过查看此页面，看起来最好的方法可能是使用包含自定义属性的特殊标记来包装每个 Text 元素。例如：

可能序列化为：

当然，当我反序列化时，我可以通过并获取“自定义文本”标签的所有实例，并手动将每个实例替换为具有自定义属性的文本节点。但是我读到可以为标签创建一个自定义构造函数，这让我相信我可以在解析阶段自动完成这个转换，这样就不需要在完成后重新编写文档。

但是，我对如何做到这一点有点模糊。我可以将原型指定为 的第二个参数document.registerElement，所以我想我只需将原型设置为创建一个 Text 节点，并使用一个 getter 和一个 setter 来处理自定义 id 属性：

但是当custom-text标签被解析时，它不会创建一个文本节点，它会创建一个 HTML 节点。我正在使用 Chrome 33，并且registerElement存在于document对象中，这应该是我需要检查的全部内容。我会尝试创建一个包装 Object.create 调用的函数，以尝试发出警报或其他东西以查看它是否被击中，但我没有看到有关原型的值应该在任何地方的文档。

HTML5 introduce new kinds of input like: number, color, datetime. AngularJS is bundled with polyfills for some of them.

I am looking for some usable method to create custom type of input, using Web Components or another standardized part of HTML. There is already anwser for AngularJS, but I do not want use any external libruary.

UPD:

Examples of custom types taken from HTML5.

• Types with custom validation like email and tel.
• Types with different view like date and datetime.
• Types with custom semantic and/or style like search.

我正在创建一个自定义元素，如下所示：

基于这个元素，我将创建一些其他元素，它们将继承我在这个元素上定义的所有方法和属性，如下所示：

我想做的是有一些标准的方式让这些元素在 DOM 中相互交互，但我不确定识别所有其他已定义元素的最佳方式是什么。有没有办法让我检查给定元素是否有一个原型，myElementProto而不仅仅是检查它是否具有我正在定义的某些属性myElementProto？这种方法似乎可行，但如果这些属性最终被更改/删除，可能会导致问题，所以我宁愿避免它。

我在我的一个项目中使用 Angular.js，我想将它与 Polymer 结合使用。我在 Angular.js 控制器和 Polymer 自定义元素之间的通信方面遇到了一些问题。

我的问题是什么...

例如，我有一个 AuthService、一个 AuthController，它使用 AuthService 向后端发送请求（带有 Express 的 Node.js）和一个简单的登录表单，如下所示：

Everiting 在这种格式下工作正常，但我想将表单移动到 Polymer 自定义元素中，如下所示：

我的问题是：如何在表单提交时调用 AuthController 的登录方法，并且我希望 Polymer 元素保持 Angular.js 独立。

我正在考虑使用输入数据触发登录事件并在 AuthController 中侦听此事件。然后登录事件处理程序可以调用AuthContoller的登录方法，但是我无法通过事件获取发送的数据。

这就是我在以下内部触发事件的方式：

这就是我在 AuthController 中监听登录事件的方式：

为什么 document.getElementById('loginForm').addEventListener() 和 document.querySelector('#loginForm').addEventListener() 有效而其他两种方式无效？如何使用 jQuery 或 jqLit​​e 获取发送的数据？我更喜欢使用它们而不是使用 html 方法。

如果你能告诉我一种更好的方式来在 Angular.js 控制器和 Polymer 自定义元素之间进行通信，而不是触发事件，我会很高兴。

非常感谢你，祝你有美好的一天

编辑：我也可以从 AuthController 内的 DOM 中获取 ng-login-form 元素，并将 AuthController 的登录方法像回调一样传递给某些 ng-long-form 方法。然后在表单提交上，ng-login-form 可以使用输入数据调用回调。

这也可以，但我认为这不是一个好方法。

我创建了一个自定义元素来处理一些数据传递，它做得很好。在这一点上，我想添加一些样式以使我的自定义元素能够像 div 一样工作。具体来说，我在其中一个中有一个表格，我不希望它在我向其中添加数据时在页面中向下增长。

现在，我的 html 看起来像这样：

我想对其进行样式设置，以便我可以指定类似这样的 css：

问题是自定义元素的大小似乎无法适应其内容，因此没有任何影响height或overflow影响它们。

小提琴。

我正在尝试检测是否已注册自定义元素，如果它仍未解决。

在支持自定义元素（例如 Chrome）的浏览器中，我可以通过检查它是否不是实例并且它与HTMLUnknowElement伪类或任何供应商前缀的等效项不匹配来做到这一点。":unresolved"element.matches

但是当我在 polyfill 下工作时，matches/webkitMatchesSelector/mozMatchesSelector函数在调用时会中断":unresolved"

有没有办法查看未解决的元素列表？或者任何其他可以在 polyfill 浏览器下工作的方式？

谢谢

编辑

刚刚找到带有书签的文档，可以检测当前页面上任何未解决的元素。问题是它不适用于 polyfill 浏览器。

原因是它检查构造函数是否仍然存在 HTMLElement，而在 polyfill 浏览器中构造函数总是 HTMLUnknownElement

我想知道如何在飞镖中以编程方式添加自定义元素？

我的代码是：-

文件：todoitem.html

文件：todoitem.dart：-

文件：todowidget.html

对应的 Dart 脚本：-

它失败并出现以下错误：-

我想知道如何在飞镖中以编程方式添加自定义元素？

鉴于当前允许创建自定义 HTML 元素的HTML5 规范（只要它们的名称包含破折号），以及 Web 组件似乎是一个可以保留的功能这一事实，我想知道为什么要创建自己的自定义 HTML元素皱眉？

请注意，我不是在问是否使用 Web 组件——它仍然是一个移动的目标，即使使用像 Polymer 这样的优秀 polyfill 可能还没有准备好投入生产。我问的是如何创建您自己的自定义 HTML 标记并对其进行样式设置，而无需将任何 JS API 附加到它们。

我按照这个示例创建了一个自定义元素，但现在extended-item不再作为 CSS 选择器工作了。

前：

后：

我试过div:extended-item了，但它不起作用。任何的想法？

[编辑]

这是我的例子extended-item

请注意，使用noscriptand extendstogether 将不允许我直接使用语法，而只能使用似乎不适用于选择器<extended-item>的其他语法。<div is="extended-item">以这种方式注册元素是等效的，但可以让我同时使用这两种语法，从而允许选择器工作：