如何从全局命名空间访问Polymer元素中的DOM元素？ [英] How can I access DOM elements in Polymer elements from a global namespace?

问题描述

我想从我的app.dart全局访问my-app-as-an-element.html中的DOM元素（因为它是一个我想从几个地方调用的方法，例如它改变了页面标题）但因为它包裹在阴影和所有，我似乎无法得到它。有一个技巧，例如

I want to access a DOM element that's in my-app-as-an-element.html from my app.dart global (because it's a method I want to call from several places, e.g. it changes the page title), but as it's wrapped in shadows and all, I can't seem to get at it. There's a trick to do e.g.

HtmlElement el;
el = document.querySelector('body /deep/ #page-title');

但是/ deep /在Safari中不被尊重，想法？

But /deep/ isn't respected in Safari, so that's off the table. Ideas?

推荐答案

你想做什么直接违背Polymer的哲学： DOM等是具有可重用的组件来管理自己的状态，DOM包括。

What you are trying to do goes directly against the philosophy of Polymer: the point of all the encapsulation, using Shadow DOM etc. is to have reusable components that manage their own state, DOM included.

如果拥有您要访问的DOM元素的元素是一个自定义元素（即您或您公司的某人编写它），最好的解决方案是将所需的功能作为该元素上的公共方法。

If the element that ones that owns that DOM element you are trying to access is a custom element (i.e. you or someone at your company has written it), the best solution would be exposing the functionality you need as a public method on that element.

例如，您的元素有< h1> ，并且要更改其内容。您可以按如下方式实现：

Say for example, your element has a <h1> and you want to change its content. You could achieve this as follows:

Polymer("my-custom-element", {
    changeTitle: function(newTitle) {
        // this operates on the element's Shadow DOM *only*,
        // NOT the entire page
        document.querySelector('h1').htmlContent = newTitle;
    }
})

然后，您可以从全局代码中调用此调用： p>

You can then make this call from your global code:

document.querySelector("my-custom-element").changeTitle("My New Title");

如果您尝试更改的元素由 public 元素（例如从 core-elements 或 paper-elements ）或从某个存储库下载的任何内容，文档，看看它是否暴露了你需要某种方式的功能。如果没有，您可以尝试编写自己的自定义元素，扩展该元素。在您的扩展元素中，您可以使用< shadow>< / shadow> 标签插入扩展对象的Shadow DOM，并通过元素的JavaScript操作，如上所述。

If the element your are trying to change is owned by a public element (e.g. from core-elements or paper-elements), or anything you've downloaded from some repository, read the documentation and see if it exposes the functionality you need somehow. If not, you could try writing your own custom element that extends that element. In your extended element, you can insert the extendee's Shadow DOM using the <shadow></shadow> tag, and manipulate it via your element's JavaScript in the same way as described above.

编辑：实际上，有一种方法来做你想要的直接，虽然我只会推荐这是最后的手段。如果您阅读 Shadow DOM 201 ，您会发现您可以通过 .shadowRoot 属性访问元素的Shadow DOM。这将为您提供另一个文档对象，您可以再次使用 .querySelector ，如下所示：

Actually, there IS a way to do what you want directly, although I would only recommend this as a last resort. If you read Shadow DOM 201, you'll notice that you can access an element's Shadow DOM via the .shadowRoot property. This gives you another Document object, on which you can use .querySelector again, like so:

document.querySelector('my-custom-element').shadowRoot.querySelector('h1');

或甚至

document.querySelector('my-custom-element::shadow h1');

这给出了元素的句柄，然后可以根据需要进行修改。但是，除非您需要快速访问此元素以进行调试，否则我不建议使用此元素。

This gives you a handle on the element, which you can then modify as necessary. But again, I don't recommend using this unless you need quick access to this element for debugging purposes.

这篇关于如何从全局命名空间访问Polymer元素中的DOM元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！