Question

对于原型上的函数，我曾经做过类似的事情：

var attachShadow = HTMLElement.prototype.attachShadow
HTMLElement.prototype.attachShadow = function (option) {
    var sh = attachShadow.call(this, option)
    console.log('ShadowDOM Attached!')
    return sh
}

在此示例中，我修改了attachShadow原型内的HTMLElement方法，以便在将新的shadowDOM附加到元素时通知我。

现在我想与ShadowRoot.prototype.adoptedStyleSheets做类似的事情，但是这次adoptedStyleSheets是一个吸气剂/设置者，var adoptedStyleSheets = HTMLElement.prototype.adoptedStyleSheets会导致错误：Uncaught TypeError: Illegal invocation。

我不确定该怎么做，如何修改原型上的吸气剂/吸气剂？

Answer 1

您不想检索adoptedStyleSheets内部的值（显然，从原型调用时会抛出错误），而是要检索其属性描述符以便在您自己的adoptedStyleSheets中重用：

(function () {
    const oldAdoptedStyleSheetsGetter = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, 'adoptedStyleSheets');

    Object.defineProperty(ShadowRoot.prototype, "adoptedStyleSheets", {
        get: function () {
            console.log('adoptedStyleSheets was accessed!');
            return oldAdoptedStyleSheetsGetter.get.call(this)
        },
    });
})();

customElements.define('web-component', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `Hi I'm a web component`;
    console.log('this.shadowRoot.adoptedStyleSheets:', this.shadowRoot.adoptedStyleSheets);
  }
});

<web-component></web-component>

如何修改原型上的吸气剂/吸气剂？

1 个答案: