标签: shadow-dom

我想找到给定元素的 DOM 范围。换句话说，包含它的文档或文档片段。

有没有比下面的代码更好/更快的东西？

function getRootNode( element ){
  if( document.contains(element) ){
    return document;
  }

  var root = element;
  while( root.parentNode ){
    root = root.parentNode;
  }
  return root;
}

http://jsbin.com/rudik/4/edit

我观看了Shadow DOM上的一些视频，以期获得一些视觉效果。每个人似乎只是忽略此模式。“只是不要使其关闭”“基本上它不太灵活，您不希望它关闭”。

attachShadow( { mode: 'open' } )

有人简要解释一下这是什么吗？

是一个HTMLVideoElement封闭的影子的例子吗？我相信您无法在此处创建阴影，因为已经存在一个阴影，但是您无法访问它或与此无关？

谢谢。

我正在尝试创建一个自定义表格行，但很难让它正常运行。我尝试了以下两种方法，它们给出了奇怪的结果。我意识到这很容易在没有自定义元素的情况下实现，但这是一个更大项目的一个小例子。我可以改变什么来达到预期的结果？

class customTableRow extends HTMLElement {
  constructor(){
    super();
    
    var shadow = this.attachShadow({mode: 'open'});
    
    this.tableRow = document.createElement('tr');
    

    var td = document.createElement('td');
    td.innerText = "RowTitle";
    this.tableRow.appendChild(td);
    
    var td2 = document.createElement('td');
    td2.innerText = "RowContent";
    td2.colSpan = 4;
    this.tableRow.appendChild(td2);

    shadow.appendChild(this.tableRow);
  }
  
}

customElements.define('custom-tr', customTableRow);

//Attempt 2
var newTr = new customTableRow;
document.getElementById('table2Body').appendChild(newTr);

td {
  border: 1px solid black;
}

<span>Attempt 1:</span>
<table>
  
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
    </tr>
  </thead>
  
  <tbody>
    <custom-tr />
  </tbody>
  
</table>

<hr>

<span>Attempt 2:</span>
<table id="table2">

  <thead>
    <tr>
      <th>One</th> …

所以我想在从 chrome 扩展内容脚本添加的 shadowroot 中显示引导程序 3 图标。到目前为止它不起作用，帮助？

manifest.js 在 web_accessible_resources 中包含 woff 文件

shadow root 的样式标签为：

 @import url(chrome-extension://__MSG_@@extension_id__/fonts/glyphicons-halflings-regular.woff2); 

我错过了什么？

在 C# 中使用 Selenium Webdriver 时，在尝试选择 Shadow DOM 下存在的元素时出现异常。

我得到的例外是：NoSuchElementException

您建议如何将 Selenium 与 Shadow DOM 结合使用？

谢谢，

米哈尔

根据自定义元素规范，

该元素不得获得任何属性或子元素，因为这违反了使用createElement或createElementNS方法的消费者的期望。

在这种情况下，Firefox 和 Chrome 都会正确地抛出错误。但是，当附加影子 DOM 时，不会出现错误（在任一浏览器中）。

火狐浏览器：

NotSupportedError：不支持操作

铬合金：

未捕获的 DOMException：无法构造“CustomElement”：结果不得有子级

没有影子 DOM

function createElement(tag, ...children) {
  let root;

  if (typeof tag === 'symbol') {
    root = document.createDocumentFragment();
  } else {
    root = document.createElement(tag);
  }

  children.forEach(node => root.appendChild(node));

  return root;
}

customElements.define(
  'x-foo',
  class extends HTMLElement {
    constructor() {
      super();

      this.appendChild(
        createElement(
          Symbol(),
          createElement('div'),
        ),
      );
    }
  },
);

createElement('x-foo');

使用影子 DOM

function createElement(tag, ...children) {
  let root;

  if (typeof …

一直在尝试更改页脚背景，但我无法做到正确。我为每个标签都有一个颜色，但只有最后一个标签被更改（蓝色 - #0000ff）。如何在 Ionic 4 中进行样式设计？

<template>
  <ion-footer>
    <ion-toolbar>
      <ion-title v-if="loggedIn">
        <a href="https://www.facebook.com/" target="_blank">
          <ion-icon name="logo-facebook"></ion-icon>
        </a>
        <a href="https://www.instagram.com/" target="_blank">
          <ion-icon name="logo-instagram"></ion-icon>
        </a>
      </ion-title>
    </ion-toolbar>
  </ion-footer>
</template>

<script>
export default {
  name: "pageFooter",
  computed: {
    loggedIn() {
      return this.$store.getters.loggedIn;
    }
  }
};
</script>

<style lang="scss">
ion-footer {
  background-color: #ff0000;
  ion-toolbar {
    background-color: #00FF00;
    ion-title {
      background-color: #0000ff;
      a {
        font-size: 25px;
        color: #000;
      }
    }
  }
}
</style>

它与“shadow dom”概念有关，我还没有完全理解。此 DOM 结构用于页脚。

我有一个像这样创建的 Shadow dom 元素......

this.wrapper = document.createElement("div");
this.shadow = this.wrapper.attachShadow({mode: 'open'});
this.$el.appendChild(this.wrapper);

现在我正在考虑在 Shadow dom 中分配一个 JS 变量，类似于在窗口上。如果我使用窗口我会做类似的事情。

window.foo = "bar";

我怎样才能做同样的事情只将范围封装到shadow dom？

例子：

老方法：

this.wrapper = document.createElement("div");
this.shadow = this.wrapper.attachShadow({mode: 'open'});
this.$el.appendChild(this.wrapper);

暗影帝国

window.foo = "bar";

我前段时间开始使用 Stencil，今天我做了一个事件冒泡的实验。

基本上，我单击一个子元素并监听其父元素的mousedown。我所期望的是那event.target是我的子组件。这非常简单，例如，如果我使用常规 DOM 元素（而不是 Stencil）运行此测试，那么一切都会按预期工作

演示版

但在 Stencil 中event.target是父元素。这就是我所做的。我的父组件如下所示：

@Component({
    tag: 'app-root',
    styleUrl: 'app-root.scss',
    shadow: true 
})
export class MyApp {
    @Listen('mousedown')
    onMousedown(event) {
         console.log(event.target, event.currentTarget);
    }

    render() {
        return (
            <div>
                <my-element></my-element>
           </div> );
   }
}

还有孩子

@Component({
    tag: 'my-element',
    styleUrl: './my-element.scss',
    shadow: true
})
export class MyElement {
    @Listen('mousedown')
    onMouseDonw(e) {
        console.log(e.target);
    }

    render() {
       return ( <div>YO</div> );
    }
}

现在，正如我所说，当我单击 时my-element，我首先看到console.logfrom my-element，这证实了这event.target是 …

我一直在使用 FAST 工具包 ( https://fast.design ) 创建我想要使用的自己的元素。那段旅程的一部分使我制作了一个Toolbar.

曾经Toolbar，我想将按钮的背景更改为透明（看起来像：https : //fluentsite.z22.web.core.windows.net/components/toolbar/definition。现在我可以创建另一个元素, 即ToolbarButton扩展Button（以及需要删除背景的任何其他控件）并且它会为我的目的工作。不过，感觉就像我应该能够做的事情，因为它是Toolbar.

我不确定这是否可能，但我无法通过 GitHub 上的文档和源代码来弄清楚。

任何意见，将不胜感激。

参考：https : //github.com/microsoft/fast/issues/3548