javascript - 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 的操作。

但有时我们希望使用代码动态创建“我的按钮”。并让它在附加时“呈现”...

有没有标准的方法来做到这一点？它与 connectedcallback() 和其他“已连接”功能有什么关系吗？

谢谢!

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

Answer 1

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

但是想一想:

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

1. 初始页面的一部分/使用 innerHTML:当浏览器加载页面或使用 innerHTML 时，您可以将属性和子项添加到组件，作为页面加载的一部分或 innerHTML 的一部分。

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

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

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)

1. 您可以使用new 实例化一个对象。就像 document.createElement 一样，您必须等到元素创建之后才能添加属性和子元素。

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 创建对象。

innerHTML 解析 HTML，然后调用 document.createElement 或使用 new 创建对象。

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

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

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

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.