我目前正致力于将当前的Dart Web UI项目翻译为Polymer.dart.我们使用Bootstrap 3作为前端样式和许多Web动画(例如下拉菜单,模态,工具提示).
然而,在我将一个Web UI组件转换为Polymer之后,所有Bootstrap JavaScript都停止为子组件工作,因为它现在封装在ShadowDOM中.要从Dart访问ShadowDOM中的元素,我必须使用shadowRoot字段,而从Chrome中的JavaScript我必须使用webkitShadowRoot属性,但我仍然无法让单个下拉菜单正常工作.
首先,在bootstrap中调用下拉列表('toggle')后,会出现下拉菜单,但永远不会消失.此外,由于事件是在窗口级别触发的,因此似乎无法检测click事件触发了哪个链接.这意味着我无法找到要显示的下拉菜单.
有没有人有使用twitter-bootstrap和Polymer的经验？
我试图了解源DOM中的哪些事件通过<content>元素在shadow DOM中接收时的样子.我正在阅读Shadow DOM W3C草案,我并不完全理解它,但听起来事件要从EventListener附件的角度"重新定位".
在事件路径跨越多个节点树的情况下,调整事件关于事件目标的信息以维持封装.事件重定向是计算调度事件的节点的每个祖先的相对目标的过程.相对目标是在保持封装的同时最准确地表示给定祖先的调度事件的目标的节点.
和
在事件发送时:
- Event target和currentTarget属性必须返回调用事件侦听器的节点的相对目标
所以这里是一个简单的Polymer自定义元素,只是将其子元素放入容器中,并向容器添加一个ClickListener(在shadow DOM中).在这种情况下,孩子是一个按钮.
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body unresolved>
<polymer-element name="foo-bar">
<template>
<div id="internal-container" style="background-color:red; width:100%;">
<content></content>
</div>
</template>
<script>
Polymer("foo-bar", {
clickHandler: function(event) {
console.log(event);
var element = event.target;
while (element) {
console.log(element.tagName, element.id);
element = element.parentElement;
}
},
ready: function() {
this.shadowRoot.querySelector('#internal-container').addEventListener('click', this.clickHandler);
}
});
</script>
</polymer-element>
<foo-bar id="custom-element">
<button>Click me</button>
</foo-bar>
</body>
</html>
当我在Chrome 38.0.2075.0金丝雀上运行时,当我点击按钮时,我得到:
MouseEvent {dataTransfer: null, toElement: …Polymer文档说:
Polymer提供了一个用于操作DOM的自定义API,以便正确维护本地DOM和轻型DOM树.这些方法和属性与其标准DOM等效项具有相同的签名,除了返回节点列表的属性和方法返回Array而不是NodeList.
注意:所有DOM操作都必须使用此API,而不是直接在节点上使用DOM API.
jQuery有很多有用的方法,虽然,这使我的生活更轻松,像toggleClass,hasClass,addClass,one...
我已经能够使用其中一些方法而不会影响我的元素,但我想知道上面引用的粗体部分背后的语义究竟是什么,所以我可以更清楚地推理事情.
注意:我不是在讨论在主文档中使用jquery,我正在讨论当我在阴影边界内时使用它,就像在元素的ready回调中一样.
我在mozilla doc中读到,不推荐使用Element.createShadowRoot():
不推荐使用此方法,而使用attachShadow.
但在我的金丝雀:铬49.0.2599.0
这工作:
var shadow = document.getElementById("node-sh").createShadowRoot();
这不起作用
var shadow = document.getElementById("node-sh").attachShadow({mode: 'closed'});
谁知道什么是对的？
假设我们有一些类似于动画CSS加载器的CSS代码,我们希望在所有使用Shadow DOM的Web组件中使用它们.如果我们无法像使用::shadow和那样刺穿Shadow DOM,我们如何重新使用这个CSS代码/deep/？
我们甚至无法<link />在阴影DOM中添加,所以目前我强制通过多个<style>标签复制代码.
我真的想知道这种用例的建议最佳实践是什么.
谢谢.
我的AngularJS 2应用程序有几个样式文件,我与一个gulp任务连接.这一切都很好,因为它们最终会出现在我发送给浏览器的大文件中.我的问题是关于Angular 2 @Component及其styleUrls属性.
@Component({
selector: 'hero',
templateUrl: 'hero/hero.template.html',
styleUrls: ['hero/hero.component.css'],
inputs: ['hero']
})
由于默认模式下的影子DOM模拟(模拟),其中定义的样式hero/hero.component.css仅应用于我想要的组件.我的问题是,串联会发生什么？我无法捆绑多个中指定的所有CSS文件,styleUrls因为我们要破坏封装的目的:组件的样式会泄漏到整个文档.但是,我不想为组件需要的每个CSS文件进行生产调用.我如何连接这些样式(并可能缩小它们),以便客户端在一次调用中获取所有样式,并仍然保留封装？
我正在研究一个广泛使用阴影dom的自动化项目.所以每次使用execute_script函数来访问shadow root
例如.
root = driver.execute_script('return document.querySelector(".flex.vertical.layout").shadowRoot')
然后使用root访问其中的元素.由于我们在很多层面都有影子根源,这让我很烦恼.是否有比这更好的解决方案来访问阴影根中的元素？
我正在使用Chrome 2.20驱动程序.
我正在尝试设置阴影DOM根的子元素.
这定义了一个名为的自定义元素element-el,它有一个span名为'x'的字母,其中包含字母x,我想要的,事情状态为红色.
class El extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({mode:'open'});
shadow.innerHTML = '<span class="x">X</span>';
}
}
customElements.define ('element-el',El);
我试过那些CSS样式:
element-el::slotted(.x) {
color:red;
}
element-el::host .x {
color:red;
}
element-el:host .x {
color:red;
}
element-el::shadow .x {
color:red;
}
element-el /deep/ .x {
color: red;
}
element-el::content .x {
color:red;
}
X不会变红.我正在使用Chrome 56,它应该支持这个......
我想在没有style在shadow DOM中放置元素的情况下设置样式.
这是一个codepen:http://codepen.io/anon/pen/OpRLVG？edit = 1111
编辑:
本文表明,它是可能的风格影儿从外部CSS文件-仅仅因为他们错了吗？
我想在使用 shadow DOM 的自定义元素中使用带有哈希 URL 的锚元素。我希望浏览器向下滚动到该锚点，但它没有这样做（至少是 Chrome）。
细节：
我有一个像这样的 index.html：
...
<a href="#destinationInsideShadowDOM">Jump</a>
...
<my-custom-element></my-custom-element>
...
另一个用于自定义元素的 html 文件，其中包含锚点：
<template id="my-custom-element">
...
<a id="destinationInsideShadowDOM"></a>
...
</template>
当我单击 index.html 中的链接时，我希望浏览器向下滚动到该锚点。
当我将锚点移动到自定义元素之外的 index.html 时，它可以工作，但不能在内部使用。
我花了一些时间进行搜索，但只看到太多常规的“遍历 DOM”博客或仅提升一个级别的答案getRootnode()
伪代码：
HTML
<element-x>
//# shadow-root
<element-y>
<element-z>
//# shadow-root
let container = this.closest('element-x');
</element-z>
</element-y>
</element-x>
标准element.closest()功能并没有捅破阴影边界;
所以this.closest('element-x')返回null因为没有 <element-x>内<element-z>shadowDom
目标：
<element-x>从后代内部查找<element z>（任何嵌套级别）
必需的：
A（递归）.closest()函数，走了（阴影）DOM小号和认定<element-x>
注意：元素可能有也可能没有 ShadowDOM（参见<element y>：仅 lightDOM）
我可以而且明天会自己做；只是想知道是否有聪明的头脑已经做到了。
资源：
这是以下答案中的未缩小代码：
closestElement(selector, base = this) {
function __closestFrom(el) {
if (!el || el === document || el === window) return …shadow-dom ×10
css ×3
javascript ×3
polymer ×3
angular ×1
css3 ×1
dart ×1
dart-webui ×1
dom ×1
html ×1
jquery ×1
selenium ×1