在我的项目中实现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选择呢？

Facebook的React对即将推出的Web Components规范的主要好处是什么,反之亦然(或者可能是谷歌的Polymer库比较多的苹果对苹果)？

根据JSConf欧盟谈话和React主页,React的主要好处是:

• 使用组件模型解耦并增加内聚力
• 抽象,构成和表现力
• 虚拟DOM和综合事件(这基本上意味着它们完全重新实现了DOM及其事件系统)
  • 在IE 8上启用现代HTML5事件
  • 服务器端呈现
  • 可测性
  • 绑定到SVG,VML和 <canvas>

几乎所有提到的内容都是通过Web组件本地集成到浏览器中,除了这个虚拟DOM概念(显然).我可以看到虚拟DOM和合成事件今天如何有利于支持旧浏览器,但是并没有丢掉大量本机浏览器代码,比如长期射击自己？就现代浏览器而言,不是很多不必要的开销/重新发明轮子？

以下是我认为 React缺少Web Components会关注的一些内容.如我错了请纠正我.

• 本机浏览器支持(读取"保证更快")
• 在vanilla JavaScript中编写JavaScript,在CSS中编写CSS,在HTML中编写HTML.
• 使用Shadow DOM进行样式封装
  • 反过来有这个,这需要在JavaScript中编写CSS.不漂亮.
• 双向绑定

是否有可能来命名自己的自定义元素<date>,<person>,<city>或其他不使用破折号？没有它们可以使用定义元素吗？

我有使用Polymer构建的元素,需要在多个站点(小部件)上运行,其中:

• 不含聚合物(很好,我可以包括)
• 聚合物已包含在兼容版本中(非常棒,不太可能)
• 未知版本的聚合物(太旧或太新,太棘手)

是否可以在命名空间中加载Polymer？例如myObj.Polymer或MyPolymerName

我发现聚合物-js可以让我加载聚合物作为模块,但这不是官方方式. 这仍然出口到全球范围

我正在开发一个项目,该项目在最新的浏览器上使用ECMA 6,可以在1.5年内发货.因此我们认为为什么不使用Web组件,因为Angular 2不可用(这将是ECMA 6).虽然我们在这里,但是我们可以完全取代Angular而不必回到石器时代吗？

如何替换Angular？

有一个名为youmightnotneedjquery.com的网站,它基本上是关于现代浏览器实际上如何拥有 jQuery传统上使用的大部分内容.我有兴趣看到类似Angular的东西.

我们主要使用四个Angular特征.我有什么选择来替换它们？

• Angular Directives - > Web Components
• 角度模块 - > ECMA 6模块(不完全相同)
• Angular Routes - > ???
• 角度双向数据绑定 - > ???

PS.我们不想用类似Backbone或Ember之类的东西替换Angular.我们希望用标准的网络技术取代它,但如果我们必须使用小工具来填补空白,我们会考虑它.

我正在尝试检测是否已注册具有特定名称的自定义元素.有办法进行这样的检查吗？

或者有没有办法获得已注册的自定义元素列表？

我知道document.registerElement,但还有什么？它是单向API吗？

作为一个试图找到一种方法来帮助内容作者通过创建(HTML)组件多年来开发和维护大型网站的人,我很高兴看到Web组件在w3c,google和mozilla上获得了关注.但在我看来,在规范中没有针对javascript库膨胀的措施.

假设我开发的组件A具有依赖性underscore.js并且想要使用组件B并且C依赖于lodash.js版本1.*等.
我没有看到任何标记依赖项和库版本的方法.当我们谈论有多个团队和利益相关者的网站时,这可能会导致巨大的图书馆膨胀.

目前的解决方案是在全球范围内对整个网站的批发客户框架进行标准化.当您在不同的服务器端框架LifeRay(如(java),EpiServer(.net),Django(python)等)中投入大量资源时,这很困难,每个框架都有首选的客户端库.

我认为Web组件是将服务器端框架与客户端代码分离的一种手段,但遗漏客户端依赖项处理是令人担忧的.

它是否符合规范,我已经错过了,或者是否有减轻这个问题的策略,我不知道？

[图书馆提到的只是示例.问题与框架,图书馆和服务器端语言无关]

更新 感谢大家回答.我很惊讶没有人提到Mozilla X-Tag或Google Polymer,这些都是最近的炒作.我完全接受了影子DOM,范围样式,自定义元素等的想法,但我没有看到任何关于如何处理JavaScript依赖关系的提及.正如@ Daniel-Baulig正确地写道,HTML Imports根本没有提到JavaScript.我承认这个问题几乎无法回答.但是,当他提到ES6模块时,我认为@ Daniel-Bailig是最接近的.我个人认为我们会在ES6模块和require.js之间找到一个可持续的解决方案.

这个问题更多的是针对用户创建的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元素？