问题标签 [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.
css - 直接在聚合物中设计元素是不好的做法吗？
例如我可以做接下来的事情：
此外，我还可以动态地为元素设置样式：
代替：
javascript - 第三方聚合物元素
我试图了解聚合物是否是为特定用例构建的——第三方 Web 组件。
我需要完成的是创建一个 Web 组件，该组件将来自调用者页面的图像 url（元素上的属性可以）作为输入，并在聚合物组件内部使用 HTML5 画布以特殊方式呈现图像。
对我来说，聚合物目前似乎不是为第三方使用而制造的。原因：
- 必须对调用者的页面有足够的控制才能添加
platform.js到<head>，特别是<head> - 我的版本
platform.js可能与调用者页面的版本不同platform.js（或者我用聚合物的 JS objs 污染了页面，对吧？） - 在非 chrome 浏览器中，样式和其他标签被注入
<head>，可能与源页面冲突 <body>如果要设置选项以避免 FOUC，则必须控制调用者的标签
传统上，我所有的 Web 组件都是通过 iframe 构建的，我想对我的方法进行现代化改造，着眼于“shadow-dom 未来”。
有没有办法以第三方安全的方式使用聚合物？也许与 [lightningjs?
html - Shadow Dom 中的 CSS 分组（进度元素）
我这辈子都搞不定，为什么当你为 shadow DOM 设置样式时，你不能对 CSS 规则进行分组？问题是当您将影子 DOM 规则组合在一起时，CSS 规则作为一个整体会被丢弃。我必须像这样布置它们
而不是这样的东西，用于潜在的未来证明：
这是为什么？！有没有更好的方法来做到这一点？
这是代码笔： http ://codepen.io/marksyzm/pen/cKzjs/
javascript - 聚合物：自定义元素不隐藏标记，css
当我第一次阅读 Polymer 的基础知识时，我认为聚合物标签内的所有内容（html、css、js）都隐藏在 shadow DOM 中。在用一个简单的例子练习了一下之后，我意识到我添加到自定义元素的所有标签都作为 Light DOM 元素可见并且没有隐藏！
我已经尝试过旧版本的 Polymer，它似乎符合我的预期！但后来我遇到了一些浏览器兼容性问题。我对这一切感到很困惑。
如果自定义元素中的所有内容都应该隐藏到 Shadow DOM 中，为什么我的 css 和标记“暴露”而不是隐藏或封装？
谢谢
javascript - How to Get Shadow Dom to Work With A LIst?
I am using Polymer to play around with the shadow dom. I have what I feel like should be a simple use case that I can't quite get working. I want define a "nav" container that can contain nav links. I'd like it to look like the following:
The following are the definitions that I created for the two elements (using Bootstrap theme-ing for style):
Inspecting the Shadow Dom, both element seem to work independently - the top-nav creates a ul and the nav-link creates a li containing an a. The problem is that the li's to not seem to be children of the ul. What am I missing here?
javascript - 如何查看与shadow dom关联的html和css
我正在使用 angular-dart 的 @NgComponent 来创建自定义 html(shadown dom) 元素。
现在我正在以编程方式更改与组件关联的 html。但因为我无法在浏览器中看到相关的 html。所以我无法调试 html 中的更改。
我想知道我们如何启用与自定义 html(shadown dom) 元素关联的 html 的显示。是否有启用此功能的 javascript？
我正在使用 Dartium 查看输出。
javascript - 如何以编程方式分发（插入）内容节点
有没有办法以编程方式将内容从 lightDOM 分发（插入）到 ShadowDOM？
我想将每个子节点包装成一个元素。例如 ：
分发为
我不仅需要它以这种方式呈现，而且还需要委托整个 HTML 行为（绑定、事件等），因为每个分布式节点都可能包含整个应用程序。
我尝试在回调时将<content select=":nth-child(..)">元素附加到模板attached
但它不起作用（可能是因为内容已经分发）。
在这里提琴
一般来说，我想要实现的是类似http://jsbin.com/hegizi/3/edit的东西，但没有硬编码类名，并使其与可变数量的子节点一起工作。
更重要的是，似乎:nth-child本机不支持：https ://github.com/Polymer/polymer/issues/470
dart - 将 angular.dart 与 Bootstrap 一起使用会产生 Object #没有方法'getAttribute'
在将 Angular.dart 0.9.10 与 bootstrap 3.1.1 一起使用并编译为 Javascript 时，我在下面附上了一个丑陋的堆栈跟踪。
每当我关注文本字段或输入一些文本时，堆栈跟踪都会在控制台中打印。
这以前有效，所以我想知道这是否是 shadow_dom 实现的错误？
该应用程序目前非常简单，并且可以与 Dartium 一起正常工作。在 Firefox 和 Chrome 中编译 javascript 后会出现同样的问题。
当我从 index.html 中删除以下行时，它可以工作
纯文本中的堆栈跟踪：
html - 封装 web 组件和事件绑定到 shadow DOM 元素
在开始使用 Polymer 之前，我开始详细学习 Web 组件。
我正在研究一个简单的示例，以使用两个<button>和一个<input type="text">元素创建一个旋转按钮。
模板是：
主机元素如下：
和 JS 代码
在实验过程中，我开始知道 JS/ 代码不能像<style>在影子 DOM 中那样工作。<template>
在上面的示例中，我添加了插入点 ( <content>)，然后将事件侦听器附加到分布式元素。
- 有没有办法封装事件监听器的实现？
- 有什么方法可以将控件和元素移动到 shadow dom，然后以任何方式附加事件侦听器？
css - Use a remote stylesheet inside a template tag (with shadow dom)
I am trying to make a semi-resuseable widget but I am running into a problem. I am trying to encapsulate a some CSS code inside a shadow root so that it does not affect the rest of the webpage but this CSS is used across multiple widgets so I am trying to include a remote stylesheet. None of the examples I have found use a remote style sheet and I was wondering if this was possible.
EX:
script to include template: