问题标签 [custom-element]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
277 浏览

javascript - 关于自定义 Web 组件和生命周期回调的说明

我希望得到一些澄清,因为它与自定义元素及其生命周期回调有关:

  1. 我对元素创建的回调有些困惑。规范说类似:“在创建元素的每个实例时调用。” 在我看来,一个实例在创建后立即“虚拟地”插入到 dom 中,因此这两个回调在文档流中基本上是背靠背的。我还在网上读到,创建的回调与定义的元素更密切相关。这些案例中的哪一个是规范所说的。

  2. 这可能与上一个问题的思路一致:我看到自定义元素的 3 种方式使其成为文档:

    1. 它从一开始就是文档的一部分。在这种情况下,关于 document.readyState 事件,定义何时注册?

    2. 它是通过 javascript 插入的。我假设程序员会在创建和插入之前注册定义。然后,问题是:创建的回调什么时候触发?附加的回调何时触发?最后,如果我在插入元素时设置其他元素与我的元素交互,我什么时候可以确定该工作已完成?

    3. 我能想到的最后一种方法与 shadow dom 相关,以及元素在文档中一半进一半出的感觉。

感谢您的阅读,如果您能提供任何澄清和启发,我将不胜感激。

0 投票
1 回答
202 浏览

dart - 未找到自定义元素

我正在尝试创建一个自定义元素,我的结果页面中有几个我已修复的警告。最后一个是:
custom element with name "paper-fab-menu" not found. See http://goo.gl/5HPeuP#polymer_11 for details.

我检查了元素的代码,删除了所有脚本以使事情变得简单,这是代码

没有关于此代码的警告。

当我导入我的元素时,我的 index.html 代码中没有警告(有一个关于不正确的路径,但已解决),这是我的 index.html 的导入部分:

飞镖编辑器仍将 标记<paper-fab-menu>为警告。Polymer 的错误指出这个错误指向了一个不正确的导入,但是所有的导入都被正确解决了,我看不到问题!

Windows 8.1 Dart 编辑器 1.8.5 Dart SDK 1.8.5

谢谢你的帮助

0 投票
1 回答
577 浏览

javascript - 注册后可以定义 HTML5 自定义元素中的生命周期回调吗?

我最近一直在使用 HTML5 自定义元素,偶然发现了一个令人沮丧的问题。在所有示例中考虑以下 HTML 正文:

这个脚本附加到页面的头部,用于注册自定义元素:

该应用程序将在 Chromium 版本 41.0.2272.76 上按预期工作:声明的自定义元素将触发两个回调,将 4 行打印到控制台。

[CALLBACK] created: <foo-element>One!</foo-element> [CALLBACK] attached: <foo-element>One!</foo-element> [CALLBACK] created: <foo-element>Two!</foo-element> [CALLBACK] attached: <foo-element>Two!</foo-element>

但是现在我有这个用例,我必须将定义推迟attachedCallback到未来的场合:

事实证明,此版本不会触发attachedCallback,并且不会打印“附加”日志行(jsfiddle)。此时,该函数肯定会在我的所有自定义元素中作为成员,因为所有代码都是在body处理 DOM 部分之前执行的。不管怎样,在加载文档后在 JavaScript 中创建和附加新元素时,结果是相同的。

令我感到困惑的是,在注册自定义标签后生命周期回调的后期定义没有被应用。我应该怎么做才能在调用后定义一个生命周期回调registerElement并使其真正生效?

0 投票
2 回答
150 浏览

javascript - 聚合物:使用不同的视图模型多次使用元素

我想创建一个聚合物元素并在具有不同 viewModel 的多个地方使用它

聚合物元素:

这可以正常工作并Souvik Basu在另一个 html 页面中使用时显示名称。但是,我不想在元素内硬编码 firstName 和 lastName ,而是想在使用这个元素时显示两个人的名字:

如何在使用 JavaScript 对象时将它们传递给这些元素?

0 投票
2 回答
1229 浏览

javascript - 动态设置聚合物自定义元素事件处理程序

我创建了一个自定义元素(admin-button.html),其中包含以下代码:

在另一个本身是自定义元素的文件 (table-body.html) 中,我动态导入此文件,创建元素的实例并将其附加到菜单列表 (#chip-menu),如下所示:

到这里为止没有问题。但是现在我想给这个新创建的按钮一个“on-tap”事件处理程序。我试图简单地设置属性

但这不起作用 - 我怀疑它与正确注册元素有关,但我似乎找不到任何关于如何在聚合物文档中的自定义元素上动态设置事件处理程序的提示。

如果我像这样将元素硬编码到 HTML 中

并实例化元素

有用。但我不想在页面加载的 HTML 代码中包含自定义元素。

这可以做到吗?

0 投票
2 回答
1498 浏览

javascript - Knockout:通过自定义元素将当前对象传递给方法

我有一个自定义的 html 元素(一个按钮),我正在向它传递一个方法。然后由自定义元素中的敲除绑定执行。The problem is, I need access to the current object in the array, when selected. 我已经做到了这一点:

这感觉非常hacky并且可能容易破坏。有没有更好的方法来实现这一点?这是一个工作示例的链接:

http://liveweave.com/w0L5w5

0 投票
1 回答
52 浏览

css - 是否可以在元素名称中使用破折号来设置自定义元素的样式?

恐怕这根本不可能,但我找不到这方面的问题,也找不到关于是否可能的参考,所以我在这里问它......

如果您熟悉 AngularJS 或 Polymer,您就会知道您可以在元素名称中使用带有破折号的自定义元素,例如special-element. 我的问题是,如何在不必为它们使用类的情况下设置所有这些元素的样式?

问题是,我的代码中有这样的内容:

它们是inline-block元素,我希望它们以特定的边距分隔(但在最后一个/第一个元素之后或之前没有边距)。为此,我在想类似的东西:

但这不起作用......关于我可以在不使用类的情况下实现这一点的任何想法special-element吗?

0 投票
1 回答
1023 浏览

forms - ZF2 如何设置使用自定义表单元素

如何在表单输入单选字段中设置选中?此表单字段是使用自定义表单元素添加的。该字段的值不一致。

我的自定义表单元素返回 1 个元素。它是一个无线电输入字段。每次提交表单时,我都需要检查这个。我使用它而不是“隐藏”字段的原因是让用户看到这个设置。

这是自定义表单元素

}

然后我调用自定义表单元素:

这会将以下内容添加到我的表单中:

我想要的输出是

0 投票
1 回答
167 浏览

javascript - Webcomponent / custom-element 实例首先停止解析