问题标签 [web-component]
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.
javascript - 将内容标签添加到模板内的输入字段
我正在尝试使用新的 html5 模板标签来制作一个半通用表单,该表单可以放置在多个用例中,而无需使用过多的 javascript。
这是一个小提琴,展示了我所拥有的http://jsfiddle.net/684uH/
我的目标是将占位符文本中的“名称”替换为通常会在<content>
标签中找到的内容
一个假设的例子来说明我的观点是:
有没有办法做类似的事情,或者是使用 javascript 手动设置它的唯一方法?
html - 封装 web 组件和事件绑定到 shadow DOM 元素
在开始使用 Polymer 之前,我开始详细学习 Web 组件。
我正在研究一个简单的示例,以使用两个<button>
和一个<input type="text">
元素创建一个旋转按钮。
模板是:
主机元素如下:
和 JS 代码
在实验过程中,我开始知道 JS/ 代码不能像<style>
在影子 DOM 中那样工作。<template>
在上面的示例中,我添加了插入点 ( <content>
),然后将事件侦听器附加到分布式元素。
- 有没有办法封装事件监听器的实现?
- 有什么方法可以将控件和元素移动到 shadow dom,然后以任何方式附加事件侦听器?
javascript - 访问嵌套的聚合物元素
假设我定义了两个自定义 Polymer 元素
然后在使用这些元素的标记中:
正如我在代码中评论的那样,我想使用自定义元素的自定义元素子节点(而不是模板的子节点)的方法和/或属性。自然,我知道不仅仅是循环遍历一个数组,但在这一点上,我并不完全确定如何从本质上访问每个自定义子项作为它们的 Polymer 类型。
我希望这是有道理的。
谢谢!
javascript - jQuery + MarkItUp + Polymer - 让它工作?
使用Polymer,我正在尝试创建一个重复使用markItUp的组件,以便我可以在需要时使用富文本编辑器。
但是,尽我所能,我无法让它正确初始化。jQuery 选择器根本找不到 textarea 元素来执行它的魔法。我已经尝试了许多添加事件侦听器、响应特定事件的咒语,而且很可能由于我缺乏 Javascript 经验,我无法让它们一起工作。这是我到目前为止所拥有的(请注意,此文件位于名为“rich-textarea”的元素下的文件夹中):
任何帮助将不胜感激。我认为这个问题通常是对 Polymer 的一个很好的试金石,因为它将三种技术结合在一起。如果这“行得通”,那么大多数事情都可能在未来发挥作用。谢谢你的时间。
javascript - 在 shadow DOM 中,Polymer 元素可以向其父元素添加事件侦听器吗?
我想做一个上下文菜单元素,它会自动contextmenu
向它的父元素添加一个侦听器(因此可以在右键单击父元素时展开它)。我设法通过查找this.parentNode
元素何时位于常规 DOM 层次结构中来做到这一点。但是,当在 shadow DOM 中时,this.parentNode
指向#document-fragment
并且似乎没有办法穿透该障碍。我在这里缺少什么吗?
polymer - WebComponents/Polymer - 树中的生命周期回调排序
假设我有以下html:
现在,假设这被解析为 DocumentFragment。现在,我将片段插入到文档中。这些自定义元素的 attachCallbacks 会按什么顺序触发?他们会始终先开火(三、二、一)吗?还是他们会从上到下(一、二、三)开火?还是完全不确定?如果我稍后删除整个树,那么 detachedCallbacks 会按什么顺序触发?
最后,这种行为在 polyfill 和 W3C 规范的预期行为之间是否一致?我已经阅读了一堆规范,并没有找到关于这种排序应该如何发挥的明确解释。
html - Web 组件 - 什么是执行上下文?
我无法在任何地方找到对我突然出现的问题的答案:Web 组件是否能够创建一个新的代码执行上下文,其中代码在它自己的线程上运行,或者这些组件是否共享主机执行上下文?
在 Web 组件中运行阻塞主线程的代码是否也会阻塞主机线程?
dom - How to remove custom element while avoiding detached DOM trees?
I'm using Polymer to create custom elements (web components) and have run into a problem when removing them from the DOM. Say I have an element like this:
Then when removing the <demo-element></demo-element>
from the DOM I will end up with a detached DOM tree with a reference to the H1 element (according to Chrome Devtools). It seems to me that it's the polymerWrapper
that references it.
According to the documentation in Polymer API reference the framework should automatically handle the unbind. Is this not working or am I misunderstanding it?
Is this something that in the future will be handled by the browsers or will we need to depend on frameworks like Polymer to do keep our memory clean? (So what I'm asking is if there are any proposals or standards relating to this)
data-binding - 嵌套聚合物元素之间的数据绑定
假设我有两个不同的polymer-elements
一个应该使用content
占位符嵌入到另一个内部。是否可以在这两个嵌套之间进行数据绑定polymer-elements
?
我试过了,但我无法让它工作:http: //jsbin.com/IVodePuS/11/
根据http://www.polymer-project.org/articles/communication.html#binding data-binding betweenpolymer-elements
应该可以工作(在那些例子中,它们是在template
标签内完成的,没有使用content
占位符)。
更新:
Scott Miles 澄清说,数据绑定仅适用于该template
级别。
但是在我的情况下,我事先不知道确切的template
内容,但我想允许我的用户parent-element
指定child-element
它应该包含的内容(前提是有不同的child-elements
.
我认为这个问题与这个问题有关:Using template defined in light dom在 Polymer 元素内
我更新了下面的示例以突出显示他的:
用户可以选择child-element
要嵌入的内容:
解决方法:
我发现的唯一解决方法是添加change watcher
并使用getDistributedNodes()
来获取子元素并手动设置data2
为data
:
css - 拖动时鼠标光标错误
我正在聚合物元素上实现拖放。该元素仅由一个形状像钻石的简单 div 组成。当我拖动元素时,拖动图像变成八边形。
这是 JSbin 的链接:http: //jsbin.com/yohohoba/4/edit
这甚至可能与 Web 组件和聚合物无关。可能是一个简单的 CSS 问题。知道可能是什么原因造成的吗?
谢谢 :)