标签: shadow-dom

我遇到了一个令我困惑的问题.

我对此问题的参考是Mac上的Chrome 32和iOS 7.0.4上的Safari.

在下面的示例中,Chrome将文本中的文本.background和textarea元素完美地呈现在彼此之上,这就是我想要的.iOS上的Safari可以抵消textarea3个像素单元中的文本.虽然填充,边框和边距在两个元素上设置为相同的值,但会发生这种情况.

当我在Safari的开发人员工具中调试时,无论是通过我的iPhone设备还是iOS模拟器,在概述元素指标时,元素本身都能完美对齐.

标记

<div class="container">
    <div class="background">This is a test</div>
    <textarea>This is a test</textarea>
</div>

CSS

.container {
    border: 1px solid #cdcdcd;
    background: #f0f0f0;
    width: 400px;
    height: 50px;
    position: relative;
    margin: 24px 0;
}

.background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #f00;
}

textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    position: relative;
    z-index: 2;
}

演示:http://jsfiddle.net/Y8S5E/2/ …

我正在使用Polymer来玩影子dom.我觉得应该是一个简单的用例,我无法完成工作.我想定义一个可以包含导航链接的"nav"容器.我希望它看起来如下:

<top-nav>
  <nav-link href="#a">A</nav-link>
  <nav-link href="#b">B</nav-link>
  <nav-link href="#c">C</nav-link>
  <nav-link href="#d">D</nav-link>
</top-nav>

以下是我为这两个元素创建的定义(使用Bootstrap主题样式):

<polymer-element name="top-nav" noscript>
  <template>
    <ul class="nav nav-tabs">
      <content></content>
    </ul>
  </template>
</polymer-element>

<polymer-element name="nav-link" attributes="href" noscript>
  <template>
    <li><a href="{{ href }}"><content></content></a></li>
  </template>
</polymer-element>

检查Shadow Dom,这两个元素似乎都独立工作 - top-nav创建a ul并nav-link创建li包含an a.问题是,li似乎不是孩子的ul.我在这里错过了什么？

根据a的内容<template>,我想将其内容包装在容器中,以便更容易/一致地遍历.如果内容<style>,并<one-other-element>在顶层,我会离开它是.否则,那里的任何东西都会被包裹起来<div>.

最初我的代码是这样的:

var hasCtnr = template.content.querySelector(':scope > :only-child, :scope > style:first-child + :last-child') != null;

但是,我注意到它不起作用 - 也就是说,hasCtnr总是如此false.所以,我做了一个简化的测试用例(jsfiddle).如您所见,:scope使用常规DOM元素.但是,它似乎不适用于DocumentFragments.我知道这项技术是新的/实验性的,但这是一个错误还是我做错了什么？

如果我使用jQuery,它可以工作......但我的猜测是因为jQuery手动执行某些操作.

var hasCtnr = !!$(template.content).children(':only-child, style:first-child + :last-child').length;

顺便说一句,我只关心Chrome/Electron的支持.

这是jsfiddle内联:

var nonTmplResult = document.querySelector('#non-template-result');
var tmplResult = document.querySelector('#template-result');

var grandparent = document.querySelector('#grandparent');
var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

var who = grandparent.querySelector(':scope > div');
if (who === parent) { …

假设我想使用阴影dom创建自定义元素.模板中的某些元素具有在链接的css文件中指定的类名.现在我想让css规则对元素产生影响.但由于影子dom风格的边界,我无法实现.

<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<template id="blog-header">
<header>
    <h1>DreamLine</h1>
    <nav>
        <ul>
            <li><a href="#0">Tour</a></li>
            <li><a href="#0">Blog</a></li>
            <li><a href="#0">Contact</a></li>
            <li><a href="#0">Error</a></li>
            <li><a href="#0"><i class="fa fa-search"></i>Search</a></li>
        </ul>
    </nav>
</header>
</template>
<script type="text/javascript">
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
    createdCallback: {
        value: function () {
            var t = importDoc.querySelector("#blog-header");
            var clone = document.importNode(t.content, true);
            this.createShadowRoot().appendChild(clone);
        }
    }
});
document.registerElement("blog-header", {
    prototype: proto
});
</script>

你看,fa-search是一个在font-awesome css文件中定义的类,我该如何设置<i>元素的样式？

我们正在使用 selenium web 驱动程序和 python 进行测试自动化，并尝试使用 shadow dom 设计自动化 html5 应用程序。无法识别 shadow-root 下的任何元素。例如。如果我想访问下面给出的影子根下的任何元素，那么我该怎么做？任何帮助表示赞赏。

我已经动态创建了元素

initElem() {
let childElFactory = this._cfRes.resolveComponentFactory(childElCmp);
// _cfRes is ComponentFactoryResolver
let childElRef = this._vcRef.createComponent(childElFactory);
// _vcRef is ViewContainerRef
childElRef.instance.childElModel = someModel;
}

我想补充

[ngClass]="{active: childElModel.active}"

属性和

#childEl

childElCmp 的宿主元素的属性。

我不想使用 elementRef，因为它不是一种正确的方法。我认为 Renderer 是我正在寻找的，但我不知道如何以正确的方式使用它。

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

这让我非常兴奋，我可以从头开始编写自己的自定义网页而无需聚合物。

例如，仅发现CSS :host在Edge和FireFox中不起作用。import在w3c弄清楚他们要使用es6模块之前，我现在可以不用html 了，但是每个浏览器都有自己的一半实现的Shadow DOM版本，而没有CSS会推动我的工作。

因此，我仍然需要完整的聚合物堆栈，以在所有浏览器中具有Web组件。

<script src="../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../hello-world.html">

<hello-world>Hello World Polymer 2.x</hello-world>

有人知道如何将Edge和FireFox填充为一个实际的Shadow DOM，而不是一个伪装成一个本地的Shadow DOM吗？

这是我尝试过的方法，但是我不知道如何告诉Edge和FireFox将其Shadow想要放置在其他位置并使用阴影/阴影。

https://jsbin.com/quvozo

<!DOCTYPE html>
<html>

<head>
  <title>Components</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
</head>

<body>
  <hello-world>Hello World ES2015</hello-world>
  <script>
    function loadScript(src, main) {
      return new Promise(function(resolve, reject) {
        const script = document.createElement('script');
        script.async = true;
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    }
    let polyfilled = false;
    const loadPromises = []; …

Google跟踪代码管理器(GTM)具有内置的Click触发器,可让您在用户点击内容时触发GTM代码.

我相信它是通过在文档上添加"click"侦听器然后在进行点击时将特殊的"gtm.click"事件推送到dataLayer来实现的.

在推送到dataLayer的'gtm.click'对象中,GTM包含从event.target属性中提取的某些数据,包括目标元素的属性,例如id/class/href.

问题是......

如果你在html中使用shadow-dom,目标/数据将是错误的.这是因为当事件通过阴影 - 边界边界冒泡时,它们"被重新定位为看起来像是来自组件而不是阴影DOM中的内部元素".

如果您在GTM中根据事件目标数据创建标签/触发器/变量,并且您希望该目标是用户实际点击的元素(这看起来很正常),则可能会出现问题.

是否存在已存在的解决方案？

我正在尝试使用浮动小部件创建一个Chrome扩展程序。为此，我必须将我的元素与页面的其余部分隔离。Shadow DOM看起来很适合此操作，但是它没有达到我的预期。

这是我的内容脚本：

content.js

var lightDom = document.createElement('style');
lightDom.innerText = 'div { color: red }';

document.body.appendChild(lightDom);

var shadowDom = document.createElement('div');

document.body.appendChild(shadowDom);

var shadowRoot = shadowDom.attachShadow({'mode': 'open'});

shadowRoot.innerHTML = `
    <style>
        div {
            background-color: blue;
        }
    </style>
    <div>Shadow!</div>
`;

阴影DOM内的div应该有黑色文本，但是有红色文本。难道我做错了什么？

在我当前的angular 7应用程序中，我们正在努力处理库中的组件，这需要一些CSS资源。我们不希望将这些资源应用于所有其余的应用程序，而是应用于一个特定的组件，其子代和孙代。

在研究过程中，我们发现了以下两个有趣的选择：

encapsulation: ViewEncapsulation.Native

和：

encapsulation: ViewEncapsulation.ShadowDom

因此，它们似乎都使用了浏览器的影子dom实现。

这些选择之间有什么区别？