JS 自定义元素获取内部 HTML

Question

我们有这样定义的自定义元素...

<my-button>
   Submit
</my-button>

和标准 customElements 定义

class MyButton extends HTMLElement{
   constructor(){
      super();
      // our custom code...
      this.innerHTML = ''; // ??? where did the 'Submit' go?
   }
}

...

customElements.define('my-button',MyButton);

问题是，在尝试获取 innerHTML 时，我们知道我们可以做类似 DOMContentLoaded 或 window.onload 的事情。

但有时我们想使用代码动态创建 'my-button' 。并在添加后 "render"...

有没有标准的方法来做到这一点？它与 connectedcallback() 和其他 'connected' 功能有关吗？

谢谢！

请注意 - 我已尝试使用 connectedCallback() 作为可能的解决方案，但这并没有解决问题。

Answer 1

在 Web 组件的构造函数中有一组关于您可以做什么和不能做什么的规则。他们在下面。

但是想想这个：

可以通过以下三种方式之一创建组件：

Part of initial page/using innerHTML: 当浏览器加载页面或使用时 innerHTML 你可以添加属性和 children 作为组件的一部分页面加载或 innerHTML.

parent.innerHTML = '<super-hero name="Thor"><super-weapon value="Mjolnir"></super-weapon></super-hero>'.

您可以调用 document.createELement 来创建一个元素。在创建元素之前，您不能添加属性或 children。

let superHero = document.createElement('super-hero');
let superWeapon = document.createElement('super-weapon');
superHero.setAttribute('name', 'Thor');
superWeapon.setAttribute('value',  'Mjolnir');
superHero.appendChild(superWeapon);
parent.appendChild(superHero)

您可以使用 new 实例化 object。就像 document.createElement 你必须等到元素被创建之后才能添加属性和 children.

let superHero = new SuperHero();
let superWeapon = new SuperWeapon();
superHero.setAttribute('name', 'Thor');
superWeapon.setAttribute('value',  'Mjolnir');
superHero.appendChild(superWeapon);
parent.appendChild(superHero)

创建组件后，它会被添加到 DOM，这就是调用组件的 connectedCallback 的时候。

所有这三种方式实际上都归结为使用 new 进行实例化。 document.createElement 调用 CustomElementRegistry.get 获取该元素的构造函数，然后使用 new 创建 object.

并且 innerHTML 解析 HTML，然后调用 document.createElement 或使用 new 来创建 object。

但是，这样做时，在调用元素的构造函数时没有属性或 children。事实上，调用connectedCallback时可能没有任何children或属性。这是在规范中添加 observedAttributes 和 attributeChangedCallback 的原因之一。

规范中缺少的一件事是知道有人在将组件添加到 DOM 之前或之后添加或更改了 children。但是，如果你真的想知道 children 何时更改，你可以使用 MutationObserver.

这就是为什么您的构造函数中不存在 children 或属性的原因。他们还没有被添加。

Now on to the rules:

When authoring custom element constructors, authors are bound by the following conformance requirements:

A parameter-less call to super() must be the first statement in the constructor body, to establish the correct prototype chain and this value before any further code is run.

A return statement must not appear anywhere inside the constructor body, unless it is a simple early-return (return or return this).

The constructor must not use the document.write() or document.open() methods.

The element's attributes and children must not be inspected, as in the non-upgrade case none will be present, and relying on upgrades makes the element less usable.

The element must not gain any attributes or children, as this violates the expectations of consumers who use the createElement or createElementNS methods.

In general, work should be deferred to connectedCallback as much as possible—especially work involving fetching resources or rendering. However, note that connectedCallback can be called more than once, so any initialization work that is truly one-time will need a guard to prevent it from running twice.

In general, the constructor should be used to set up initial state and default values, and to set up event listeners and possibly a shadow root.

Several of these requirements are checked during element creation, either directly or indirectly, and failing to follow them will result in a custom element that cannot be instantiated by the parser or DOM APIs.

Answer 2

有两种方法。

您可以在 window.onload 之后定义自定义元素，一切正常。

window.addEventListener('load', () => {
    customElement.define('my-button', MyButton);
});

在 <script>

defer

<script defer src="my-button.js"></script>

Answer 3

如果您需要可靠地访问自定义元素的子元素，无论您的自定义元素脚本如何放置在文档中，这都是为您准备的：https://github.com/WebReflection/html-parsed-element

很难检测到解析器何时解析了自定义元素的子元素； HTMLParsedElement 通过反复检查是否存在 nextSibling 来做到这一点（这意味着当前元素的解析已完成）。当前的实现用检查自定义元素的父元素中的 childList 和 subtree 更改的变异观察器替换了此检查。

JS 自定义元素获取内部 HTML

JS Custom Element get inner HTML

html

javascript

web-component

shadow-dom