问题标签 [shadow-dom]
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.
dart - 嵌套聚合物模板继承
有没有办法用它的父模板包围一个聚合物子模板？
在以下示例中，影子标签将父模板带入子视图，但它忽略了其内容：
母体聚合物元素
子聚合物元素
dart - 引导轮播作为 angular.dart 组件？
我正在尝试在 angular.dart 组件中使用引导程序的轮播。这是html：
prev/next 控件不起作用（可能还有其他问题），可能是因为 href 属性错误。我试图通过在运行时更新 href 来修复它们，但我不知道如何输入指向 shadow dom 内部 id 的 url。
或者，我尝试添加将使用 dart:js 调用 carousel('prev') 和 carousel('next') 引导函数的事件侦听器。这种方法也失败了，因为我不知道如何将影子 dom 根引用从 dart 传递到 javascript。
有什么建议么？
javascript - 如何使用 iframe 或 shadow dom 创建跨浏览器子文档？
我想在 JavaScript 中创建一个完全封装的子文档，它有自己的<head>、<body>、 样式、 html 和 js。基本上是一个影子 dom 或 iframe，但没有 src 属性。
虽然我喜欢 shadow dom 的想法，但它的支持率很低，因此还没有准备好迎接黄金时段。
所以我一直在努力创建一个 iframe，但在此过程中遇到了各种障碍。这是一个 jsFiddle，展示了我的各种尝试。
iframe 不能存在于 dom 中。这部分很关键。澄清一下，如果它暂时存在于dom中是可以的，但它必须能够被提取并只存在于JS中。
亲爱的，我们有头了
但内容是什么样的？
它是一个文档，但不在元素内部，所以让我们尝试将它放在 dom 或另一个元素内部？ 以下两种尝试都不起作用，因为选择器没有上下文或其他东西......
我希望能够在不向 dom 附加任何内容的情况下创建 iframe / subdocuemnt ...但如果必须的话，我仍然希望能够随后将其从 dom 中删除并在 js 中进一步管理它。
我有这个不起作用的小功能，但说明了我想要创建的 iframe 或子文档生成器的类型
css - Shadow DOM：仅当宿主元素为时如何应用 CSS 样式？
如果它是元素的直接子元素，我必须对我的 Web 组件应用特殊的 CSS 样式<body>。这是我迄今为止尝试过的：
浏览器：Chrome 稳定版 (32.0.1700.107)、Chrome Canary (34.0.1843.3)。
html - iOS中textarea上的Shadow DOM强制填充
我遇到了一个让我有点困惑的问题。
我对这个问题的参考是 Mac 上的 Chrome 32 和 iOS 7.0.4 上的 Safari。
在下面的示例中，Chrome 将.background和textarea元素中的文本完美地呈现在彼此之上，这就是我想要的。不过，iOS 上的 Safaritextarea以 3 个像素为单位来偏移文本。尽管填充、边框和边距在两个元素上设置为相同的值，但仍会发生这种情况。
当我通过我的 iPhone 设备和 iOS 模拟器在 Safari 的开发人员工具中进行调试时，元素本身在概述元素指标时完美对齐。
标记
CSS
演示：http: //jsfiddle.net/Y8S5E/2/
任何人都可以为这个问题提供解决方案或一些理论来研究吗？
编辑
这似乎是textarea's shadow DOM 节点的问题。有人对如何定义此元素的填充有一些参考吗？百分比值还是硬 3px 值？有什么办法可以去掉这个填充？
polymer - 如何在自定义元素中将周围页面的样式用于链接？
我有一个自定义<my-header>元素，它在 shadow dom 中生成一个链接，我希望它的样式与周围页面中的其他链接相同。旧applyAuthorStyles属性是一个不错的方法来实现这一点，尽管它有自己的问题。现在applyAuthorStyles已删除，我看到的选项是让嵌入器将其全局样式定义为：
以此类推，侵入了不想要页面样式的元素的样式。
有一个更好的方法吗？
我在http://jsbin.com/yusox/1/edit及以下有一些示例代码。如果您的浏览器打开了本机 Shadow DOM（Chrome 中的 chrome://flags/#enable-experimental-web-platform-features），您只会看到不一致的情况。
css-selectors - 我如何编写在大多数孩子之后*选择特定元素的影子 dom？
我正在编写一个类似自定义<figure>的元素，我想<figcaption>在主要内容下放置一个。<figcaption>需要包含来自自定义元素的子节点的一些内容（具有潜在格式的文本），我正在为此使用<content select="span.caption"></content>. 但是，根据Shadow DOM 规范，<span>已经分发到<content></content>布局自定义元素主体的较早元素。
我尝试使用<content select=":not(span.caption)"></content>来避免分发标题，但这似乎不是复合选择器并且不匹配任何内容。
让元素按我想要的顺序呈现的推荐方法是什么？
这是有问题的代码，也位于http://jsbin.com/vizoqusu/3/edit：
css - 当 display:inline 自定义元素包含 display:block 元素时会出现什么问题？
我正在构建一个自定义元素来标记示例（在http://jsbin.com/kiboxuca/1/edit使用它）：
这会产生我想要的外观：
一些文本 [示例：简介
更多示例——结束示例]
但是，因为它使<my-example>元素display:inline我担心块级<pre>元素会导致问题。
样式设置<my-example>为display:block强制它从新行开始，这与我需要模仿的PDF不一致。
像这样违反 CSS 盒子模型应该会出现什么样的问题，我该如何缓解这些问题？
polymer - Native vs Polyfill Shadow DOM
我正在做一个项目，我正在使用 Polymer 和 Web 组件构建一个包含多个节点和边的图形。我正在使用一个由我的公司内部开发的底层库，它不基于 Web 组件。这个库包含用于创建节点、初始化图等的函数。我创建了一个名为 graph 的自定义元素，它将与库进行交互。以下是该元素的声明：
在我的元素 Javascript 代码中，我调用库中的一个函数来初始化图形。此函数调用需要画布 div 的句柄（id="graph_canvas" 的 div）。所以我在进行函数调用时将 this.$.graph_canvas 作为参数传递。但是该库抛出一个异常，因为它期望 div 的本机版本，而是得到一个包装的，因为 this.$.graph_canvas 对应于 div 的包装版本。
在加载我的应用程序时，我正在试验不同的解决方案并在查询字符串中将 shadow=native 作为参数传递。
但现在的问题是，我的应用程序只能在 Chrome、Canary 和 Opera 上运行，因为其他浏览器没有对 Shadow DOM 的原生支持。有没有其他方法可以解决这个问题？
任何帮助将不胜感激。
谢谢。
dart - 指针事件目标始终是最外层的 Polymer 元素
我正在将 聚合物用户界面卡从 JS 移植到 Dart。
不同之处在于，在我们的项目中（按照惯例），我们有一个包含整个应用程序的附加聚合物元素（app-element）。
在 JavaScript 中它看起来像
我们的 Dart 端口看起来像
app-element有 body 标签在 JS 中的内容
聚合物用户界面卡（在 JS 和 Dart 中相同）
这里的问题是所有指针事件的目标是元素<app-element>而不是<polymer-ui-card>元素。
这是设计使然，还是这可能只是 Dart 的问题，还是我做错了什么？