小编Dan*_*man的帖子

我想更改隐藏在影子根中的元素的属性。由于项目的性质，我无法直接引用 JS 中的文档，我只能使用自定义类（不适用于影子根）或 jQuery，但我不知道如何编写指向该文件的路径元素。

该元素没有“部分”，因此我无法在选择器中使用它。

我已经尝试过的 - 我选择了shadow上方的最后一个元素并引用了它的shadowRoot，然后我尝试通过它的id找到封装的元素。我正在devtool中测试它，到目前为止还没有成功。

$("#root_ptcschartline-7-bounding-box".shadowRoot).find("#chart-line")
  .css('padding','100px');

html 片段：

我花了一些时间进行搜索，但只看到太多常规的“遍历 DOM”博客或仅提升一个级别的答案getRootnode()

伪代码：

HTML

<element-x>
//# shadow-root
    <element-y>
        <element-z>
        //# shadow-root
        let container = this.closest('element-x');
        </element-z>
    </element-y>
</element-x>

标准element.closest()功能并没有捅破阴影边界;

所以this.closest('element-x')返回null因为没有 <element-x>内<element-z>shadowDom

目标：

<element-x>从后代内部查找<element z>（任何嵌套级别）

必需的：

A（递归）.closest()函数，走了（阴影）DOM小号和认定<element-x>

注意：元素可能有也可能没有 ShadowDOM（参见<element y>：仅 lightDOM）

我可以而且明天会自己做；只是想知道是否有聪明的头脑已经做到了。

资源：

• https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
• https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/host

更新

这是以下答案中的未缩小代码：

        closestElement(selector, base = this) {
            function __closestFrom(el) {
                if (!el || el === document || el === window) return …

我刚刚开始使用 Web 组件，我似乎无法弄清楚为什么我的 attributeChangedCallback 没有触发；

我一直在将它与我创建的组件进行比较，其中一切都正常工作。

我检查过的事情：

1. 正在改变的 attr 的拼写（“isOpen”）
2. attributeChangedCallback 的拼写（为了确定，从字面上复制了它正在工作的另一个组件），
3. 确保其observedAttributes（复数）和正确的属性设置在那里，
4. 检查了 setter 和 getter 是否工作正常，并且在toggleStatus 函数中我可以记录 isOpen 属性，并看到它按预期更改。

但是，如果我尝试在 attributeChangedCallback 中执行任何操作（示例只是记录名称），它不会触发。

我确信我错过了一些非常简单的东西？

class HamburgerMenu extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
    <svg xmlns="http://www.w3.org/2000/svg" width="164" height="102" fill="none">
      <g stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
        <path id="top" d="M10 92L154 92"/>
        <path id="middle" d="M10 50.8L154 50.8"/>
        <path id="bottom" d="M10 10L154 10"/>
      </g>
    </svg>`;
    this.svg = this.shadowRoot.querySelector("svg");
    this.svg.addEventListener("click", this.toggleStatus.bind(this));
  }

  static get observedAttributes() {
    return ["isOpen"];
  } …

我对组件开发很陌生，并且正在努力打印一个简单的 hello world。有人能帮我吗？

重现步骤：

1. now-cli login --host stack.service-now.com
2. now-cli project --name nowjedi-hello -- description 'A web component printing Hello World'
3. npm install
4. now-cli develop --open

返回：

SyntaxError: Failed to execute 'define' on 'CustomElementRegistry': "299742-nowjedi-hello" is not a valid custom element name

我正在关注“开发你的组件”。知道发生了什么吗？ https://developer.servicenow.com/dev.do#!/guide/orlando/now-experience/cli/development-flow/。

是否有安全原因阻止<use>元素在数据 URI 图像中工作？我尝试过这样的事情：

const svg = document.querySelector("svg");
const img = document.querySelector("img");
img.src = "data:image/svg+xml;charset=UTF-8," + encodeURI(svg.outerHTML);

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="foo" width="100" height="100"/>
  <use xlink:href="#foo" x="10" y="10"/>
</svg>
<img src=""/>

如果我直接访问数据 URI，Chrome 和 Firefox 都会给出如下错误消息：

<use>数据 URI 中包含元素的损坏图像示例：

<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20width=%22110%22%20height=%22110%22%3E%0A%20%20%3Crect%20id=%22foo%22%20width=%22100%22%20height=%22100%22/%3E%0A%20%20%3Cuse%20xlink:href=%22#foo%22%20x=%2210%22%20y=%2210%22/%3E%0A%3C/svg%3E%0A"/>