我希望在页面上的多个位置呈现"相同"的HTML元素.此元素是脚本/动画的,各种渲染需要保持同步.
我考虑过的解决方案包括:
我还没有测试过Chrome 25中提供的最后一种替代方案.在W3C规范说:
值得特别考虑的一种情况是插入点是另一个影子主机的子节点时的情况......将节点分配到多个插入点的效果称为重新投影.
但是之后...
尽管在重投影期间分布到多个插入点,但由于重复投影的限制,节点仍然只渲染一次:因为插入点只是在影子主机的子节点时才会重新投影,它们是从未渲染过.而是将阴影树呈现在它们的位置.
是否有可能影子DOM可能做我想要的并且值得测试,或者是否有其他推荐的方法？
我有一个自定义元素,它本身托管一个自定义元素.
<polymer-element name="flex-nonvisual">
<template>
<polymer-flex-layout></polymer-flex-layout>
</template>
</polymer-element>
现在进入attached()(或其他一些回调)PolymerFlexLayout我想设置flex-nonvisual元素的class属性.
在Javascript代码看起来像 this.parentNode.host.classList.add('someclass');
在Dart in attached()(调用之后super.attached())this.parent为null并且我找不到对host元素的任何其他引用.
我怎么能在Dart中做到这一点？
有没有办法用它的父模板包围聚合物子模板？
在以下示例中,shadow标记将父模板带入子视图,但它忽略了其内容:
母体聚合物元素
<polymer-element name="my-window">
<template>
<div class="windowframe">
<p>test</p> <!-- can be shown with shadow tag -->
<content></content> <!-- cannot be used with shadow tag -->
儿童聚合物元素
<polymer-element name="my-window-example" extends="my-window">
<template>
<!-- get the hosts' shadow and insert here -->
<shadow>
<p>Here is the content of my window<p> <!--won't be shown -->
</shadow>
</template>
查看有关ShadowDOM的文章,似乎是对DocumentFragments的增强.ShadowDOM的真正好处是什么？CSS特异性？我不能用Fragments做大致相同的事情吗？
我正在寻找各自的功能列表.例如,两者似乎都允许您在内存中组装dom树并离开主渲染路径.但是,ShadowDOM似乎具有作用域CSS的额外好处.
在什么情况下你会使用ShadowDOM vs你想要使用DocumentFragments的地方？
UPDATE
在仔细研究了这个之后,我看到这两种技术是完全正交的.
注意:由于问题已经结束,我自己无法回答.我最初把我的发现的细节放在下面的评论中,但想到更多的人会在这里查看文本.
Document Fragments是一个Javascript/DOM构造工具,用于创建DOM之外的非heirrchical节点集合(每个节点可以是其他节点的父节点).它们本质上是节点集合的包装器,一旦片段附加到DOM就会被放弃.DocumentFragments允许您在同一级别收集多个节点,并将它们作为兄弟节点附加到另一个DOM节点.
Shadow Dom就是在更大的渲染DOM中隔离副作用.ShadowDom允许您使用封装样式创建沙盒可重用组件.当基于ShadowDom的组件添加到更大的Web应用程序时,其CSS样式不会泄漏到应用程序的其余部分,应用程序自己的样式也不会影响组件的呈现.
请注意CSS组合器,例如/deep/,::shadow存在用于从父dom样式化(和选择)shadowDom组件,但这些组件在不久的将来被弃用.因此,建议使用ShadowDOM的可重用组件依赖CSS变量进行样式设置,如果它们打算由使用它们的应用程序进行自定义.
javascript html5 documentfragment shadow-dom angular2viewencapsulation
我已经将Mozzila示例https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements#Observed_attributes中的代码复制并粘贴到 我的计算机上的文件中,当我运行它时,我从每次调用this.getAttribute.我看到它在上面的链接上工作但是当我运行我复制的项目时,它是null,在我编写的另一个项目中发生同样的事情,基于这个例子:
HTML文件:
If nothing appeared below, then your browser does not support Custom Elements yet.
<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>
JS档案:
// Create a class for the element
class XProduct extends HTMLElement {
constructor() {
// Always call super first in constructor
super();
// Create a shadow root
var shadow = this.attachShadow({mode: 'open'});
// Create a standard img element and set it's attributes.
var img = document.createElement('img');
img.alt = this.getAttribute('data-name'); …目前,我的组织在聚合物1上使用Selenium,Protractor和Mocha,我们使用阴暗的dom.对于验收测试,我们使用/deep/组合器来刺穿DOM.对于聚合物2,/deep/组合剂不推荐使用.
我的问题:在编写验收测试时,DOM如果/deep/不推荐使用组合器,我该如何穿透阴影？
有没有办法继承:主机元素css样式到shadow DOM？原因是如果我们开始开发Web组件,每个Web组件样式必须在页面上保持一致.
该页面可以具有全局css,并且此全局css样式可以继承到shadow DOM.有::shadow和/deep/,但现在已经过时了.
或者,这是否违背模式？如果是这样,为什么？
我发现了这个Q/A,但对我来说似乎已经过时了. Shadow DOM元素可以继承CSS吗？
http://plnkr.co/edit/qNSlM0?p=preview
const el = document.querySelector('my-element');
el.attachShadow({mode: 'open'}).innerHTML = `
<!-- SEE THIS 'red' is not red -->
<p class="red">This is defined in Shadow DOM. I want this red with class="red"</p>
<slot></slot>
`; .red {
padding: 10px;
background: red;
font-size: 25px;
text-transform: uppercase;
color: white;
}<!DOCTYPE html>
<html>
<head>
<!-- web components polyfills -->
<script src="//unpkg.com/@webcomponents/custom-elements"></script>
<script src="//unpkg.com/@webcomponents/webcomponentsjs"></script>
<script src="//unpkg.com/@webcomponents/shadydom"></script>
<script src="//unpkg.com/@webcomponents/shadycss@1.0.6/apply-shim.min.js"></script>
</head>
<body>
<div>
<p class="red">I'm outside …这个问题与StackOverflow上的其他问题类似,但我找不到任何适用于我的情况和非弃用方法的答案(我开始认为这种情况可能没有任何好的解决方案).
假设我们有一些main.css文件,其中包含按钮,列表,链接等的常用样式.所以它只是一些标准的.css文件,其中包含我们希望在整个应用程序中重用的常见样式.我们希望使用Shadow DOM将相同的样式应用于Web组件.
我知道有几种方法可以实现这一目标:
我还检查了Angular Framework中如何解决相同的问题(我检查了Angular的第5版).当我将封装行为设置为Native时,它实际上只是复制样式(如上面描述的#3),我认为这不是最好的方式(但可能是目前最好的方式).
那么,有没有人知道是否有任何其他方法来解决这个问题没有上述缺点？听起来像Shadow DOM的当前缺点带来了比它试图解决的更多问题.
我正在开发一个使用 StencilJS 构建的 Web 组件的 Web 应用程序。所有组件都打开了 Shadow DOM。许多组件使用“槽”来接受子内容。
我在使用 Flexbox 布局此应用程序时遇到一些问题。我经常遇到的一种情况是，我希望一个组件充当 Flexbox 容器，而其子组件则充当 Flex 项目。
我怀疑 Shadow DOM 阻塞了我的 Flexbox。有没有办法让 Flexbox 与 Web 组件和 Shadow DOM 一起工作？
例子：
<web-component-a>
<web-component-b></web-component-b>
<web-component-b></web-component-b>
<web-component-b></web-component-b>
</web-component-a>
我正在构建一个小部件，为了避免 css 冲突，我将小部件 css 移到了 Shadow 根目录中。但即使如此，父网站的 CSS 样式也会影响小部件
注意到由于父网站上的这一行而发生了错误。
@media screen and (min-width: 768px) {
body {
font-size: 2rem;
}
}
问题是，为什么父网站中的 body 属性会影响 Shadow root css。Shadow root的目的不就是为了避免这种冲突吗？
我怎样才能避免此类问题？
我试图避免 !important 但还有其他方法吗？
shadow-dom ×10
css ×3
javascript ×3
dart ×2
dart-polymer ×2
html5 ×2
polymer ×2
dom ×1
flexbox ×1
html ×1
polymer-2.x ×1
protractor ×1
selenium ×1
stenciljs ×1