标签: shadow-dom

在我的项目中实现Shadow DOM会使它们像React使用的虚拟DOM一样快吗？

这对谷歌来说是不可能的,因为每篇关于:before和:after伪元素的文章似乎都使用了"内容"这个词.

我在这篇 CSS-Tricks文章中听说过它,解释了如何将图像滑块实现为Web组件的示例用例.它出现在里面的代码示例是:

CSS

#slides ::content img {
   width: 25%;
   float: left;
}

HTML

<template>
  ...
  <div class="inner">
    <content select="img"></content>
  </div>
</template>

它似乎是指这个<content>标签,用于允许用户包含Web组件,但我想更深入地理解这一点.

编辑:

在进一步阅读之后,在上述文章中,我发现了一个链接作者的"Shadow DOM CSS Cheatsheet",其中包含一段解释::content伪元素的内容:

选择元素内的分布式节点.需要与不支持本机选择器的浏览器的polyfill-next-selector配对.

::content h1 {
    color: red;
}

资料来源:http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/

这很有帮助,但我仍然发现整个事件相当不透明.还有其他见解吗？

在查看Polymer时,我在Chrome 37的开发人员工具的样式选项卡中看到以下CSS选择器:

我还看到了一个带有伪选择器的选择器::shadow.

那么,是什么做的/deep/和::shadowCSS选择呢？

我想总是显示输入"数字"字段的向上/向下箭头.这可能吗？到目前为止,我没有运气...

http://jsfiddle.net/oneeezy/qunbnL6u/

HTML:

<input type="number" />

CSS:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}

我正在使用LoginComponentAngular 2中的一个应该"重新设置" html和body标签,所以我可以放入一个特定于登录页面的背景图像.

但只是为html, body我添加一种风格login.css似乎不起作用.

有没有办法覆盖html, body组件的样式？或任何元素.

我尝试过这样的事情:

:host(.btn) { ... }
:host(.btn:host) { ... }
.btn:host { ... }

从Login组件外部设置元素的样式.但似乎没有任何效果.

CSS Scoping说

阴影主机的后代不得在格式化树中生成框.相反,活动阴影树的内容 生成框,就好像它们是元素的内容一样.

CSS Pseudo-Elements描述::before和::afteras

这些伪元素生成框,好像它们是它们的原始元素的直接子元素

那么这些是真的呢？

• 首先,影子主机的所有内容(不包括::before和::after)都被活动阴影树的内容替换.然后,::before和::after产生的阴影主机盒.
• 首先,::before和::after产生的阴影主机盒.然后,影子主机(包括::before和::after)的所有内容都被活动阴影树的内容替换.

Firefox和Chrome做前者,但规范是否描述了这种行为？

var root = document.querySelector('div').createShadowRoot();
root.innerHTML = "<p>Shadow content</p>";

div::before, div::after {
  content: 'Generated content';
}

<div>Content</div>

呈现组件时,将忽略其中的内容,例如:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<div>{{title}}</div>',
})
export class AppComponent {
  title = 'app works!';
}

使用它像:

<app-root>Ignored content</app-root>

呈现:

<div>app works!</div>

但是看看PrimeNg对话框,他们使用这样的组件:

<p-dialog [(visible)]="display">
    <p-header>
        Header content here
    </p-header>
    Content
    <p-footer>
        Footer content here
   </p-footer>
</p-dialog>

作为Header content here,Content并且Footer content here在组件内部,为什么它们不被忽略,我怎样才能实现这一目标？

Angular 2用什么来更新DOM.是Shadow DOM还是Virtual DOM？Angular 1中有没有这样的概念？

这个问题更多的是针对用户创建的shadow DOM元素,但是对于可访问性,我将使用date输入类型来解决这个问题:

比方说,date我的页面上有一个输入.编辑完几个位后,阴影DOM标记(使用Chrome)看起来像:

<input type="date">
    #document-fragment
        <div pseudo="-webkit-datetime-edit">
            <div pseudo="-webkit-datetime-edit-fields-wrapper">
                <span role="spinbutton">dd</span>
                <div pseudo="-webkit-datetime-edit-text">/</div>
                <span role="spinbutton">mm</span>
                <div pseudo="-webkit-datetime-edit-text">/</div>
                <span role="spinbutton">yyyy</span>
            </div>
        </div>
        <div></div>
        <div pseudo="-webkit-calendar-picker-indicator"></div>

与date输入相关的方法和属性似乎根本没有引用shadow DOM(JSFiddle),所以我想知道如何(如果有的话)可以访问这些shadow DOM元素？

我有一个项目,我在本地使用shadow DOM(不是通过polyfill).我想检测一个给定element是否包含在shadow DOM或light DOM中.

我已经查看了元素上的所有属性,但似乎没有根据元素所在的DOM类型而有所不同.

如何确定元素是影子DOM还是轻型DOM的一部分？

以下是针对此问题的"shadow DOM"和"light DOM"的示例.

 (light root) • Document
      (light)   • HTML
      (light)   | • BODY
      (light)   |   • DIV
(shadow root)   |     • ShadowRoot
     (shadow)   |       • DIV 
     (shadow)   |         • IFRAME 
 (light root)   |           • Document
      (light)   |             • HTML
      (light)   |             | • BODY
      (light)   |             |   • DIV
(shadow root)   |             |     • ShadowRoot
     (shadow)   |             |       • DIV
       (none)   |             • [Unattached DIV of second Document]
       (none)   • [Unattached …