标签: shadow-dom

在Chromium上开发一段时间之后,我意识到Chrome正确地实现了阴影DOM,而Chromium(尚未)并且打破了我的不太好的封装组件.这与其他SO问题有关,但更具体地针对网格布局而不仅仅是CSS.

如果布局是在顶级文档中完成的,那么它可以工作,但是如果它在自定义元素中完成则不起作用.正如在另一个问题中所建议的那样,我在组件中插入了相关的引导代码,但它们似乎仍然没有正确布局.这是一个有效的示例布局:

<!-- index.html -->
<div class="container-fluid">
  <div class="row">
    <my-element-a class="col-md-6">
    <my-element-b class="col-md-6">
  </div>
</div>

这是一个不起作用的例子:

<!-- custom-element-c.html -->
<div class="container-fluid">
  <div class="row">
    <my-element-a class="col-md-6">
    <my-element-b class="col-md-6">
  </div>
</div>

有没有办法在Polymer自定义元素中使用Bootstrap网格布局？

有没有推荐的方法让Icon Fonts(eq.FontAwesome/Octicons)流入Shadow DOM？

目前,当我想在自定义元素的Shadow DOM中使用图标时,我必须在Shadow DOM中包含ociticons.css内联文件的部分内容:

#shadowroot
<style>
    .octicon, .mega-octicon {
      font: normal normal normal 16px/1 octicons;
      display: inline-block;
      text-decoration: none;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .mega-octicon { font-size: 32px; }
    .octicon-search:before { content: '\f02e'} /* ? */
</style>
<button>
  <span class="mega-octicon octicon-search"></span>
</button>

(显然,@font-face它会渗入Shadow DOM.)

我需要在多个Polymer元素之间共享样式。创建“ styles.html”文件然后将其导入到我的其他元素中是否可以接受，还是随着应用程序的增长而开始对性能产生影响？我知道有0.5种核心样式，但是如果导入也能正常工作的话，这似乎是不必要的。

styles.html

<style>
  button {
    background: red;
  }
</style>

my-button.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/main-styles.html">
<link rel="import" href="../behaviors/mixins.html">

<dom-module id="my-button">
  <template>
    <button>{{text}}</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-button',
    behaviors: [ButtonBehavior]
  })
</script>

考虑一下,我使用Shadow DOM隐藏其内部div-soup和布局的元素很少.

即使是艰难的,它们也是不同的,它们共享相同的CSS样式表,因为它们使用的是相同的元素集,这些元素应该以一致的方式进行样式化.例如,这可以是CSS框架(引导程序).

问题是这个样式表非常大.

在许多Shadow Roots(在SD V1中)之间分享如此大样式表的最有效方法是什么？

给定阴影根中包含的元素,如何获取承载所述阴影根的元素？有没有一种方法可以实现这一点,无论元素在树中的位置(即给定引用element2或者element3,获取引用element1)？

element1
? #shadow-root
  ? element2
    ? element3

我在将Selenium与影子DOM内的元素一起使用时遇到问题。有这个窍门吗？难道我做错了什么？

这是我的各种尝试：

var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().forBrowser('chrome').build();

driver.get('https://shop.polymer-project.org/');

// Goal is to find shop-app #shadow-root app-header
//

// This is OK; no shadow DOMs
driver.findElement(webdriver.By.css('shop-app'));

// This fails because:
// NoSuchElementError: no such element: Unable to locate element
driver.findElement(webdriver.By.css('shop-app /deep/ app-header'));

// This fails because:
// NoSuchElementError: no such element: Unable to locate element
driver.findElement(webdriver.By.css('shop-app::shadow app-header'));

// This fails because:
// TypeError: Custom locator did not return a WebElement
driver.findElement(webdriver.By.js(function() {
    return document.querySelector('shop-app /deep/ app-header');
})); …

如果我理解正确，创建Web组件的一个实例可以概括为创造一个影子根，从模板复制标记，如到其中：

var Template = document.querySelector('#myTemplate');
var TemplateClone = document.importNode(Template.content,true);
TargetElement.appendChild(TemplateClone);

当然，如果模板中包含的风格标签的CSS规则，这些都将被复制为好。因此，我们可以有属于一个网络组件的内部标记范围的样式。

问题：

1. 是否有任何性能问题，当我创建万吨非常相同的Web组件的实例，作为样式只是复制，而不是重复使用？
2. 是否有要共享相同的Web组件的多个实例的风格节点的方法吗？

无法使用带有Polymer 1.x或2.x的Shadow DOM设置元素的样式.考虑Polymer 2.0中的以下自定义元素:

<link rel="import" href="../polymer/polymer.html">

<!--
`semantic-ui-button`


@demo demo/index.html
-->

<dom-module id="polymer-button">
  <template>
    <div class$="button {{size}}">{{label}}</div>
  </template>

  <script>
    class MyElement extends Polymer.Element {
      static get is() {
        return 'polymer-button';
      }
      static get properties() {
        return {
          label: {
            type: String,
            value: 'polymer-element'
          },
          size: { type: String }
        };
      }
    }

    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

在演示中:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>polymer-element demo</title>

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

    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
    <link rel="import" …

在教程中，我仅看到Shadow DOM的优点，但也应该有缺点。在哪种情况下，我们应该避免使用Shadow DOM？

如果您加载地图有标记的Safari浏览器,具有内部地图影子DOM,似乎在先挂了无限的页面重载循环,直到无限循环是由浏览器,然后显示以下错误(翻译停止来自西班牙语):

使用http:// localhost:8000/index.html反复出现问题.尝试再次加载网页.

我创建了以下非常简单的Polymer项目来重现问题.

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Markers test</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 300px;
        width: 300px;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script …