defineProperties(Element.prototype, {
querySelector: {
value: querySelectorPatched,
writable: true,
enumerable: true,
configurable: true,
},
querySelectorAll: {
value(this: HTMLBodyElement): NodeListOf<Element> {
const nodeList = arrayFromCollection(
elementQuerySelectorAll.apply(this, ArraySlice.call(arguments) as [string])
);
if (!featureFlags.ENABLE_NODE_LIST_PATCH) {
const filteredResults = getFilteredArrayOfNodes(
this,
nodeList,
ShadowDomSemantic.Disabled
);
return createStaticNodeList(filteredResults);
}
return createStaticNodeList(
getFilteredArrayOfNodes(this, nodeList, ShadowDomSemantic.Enabled)
);
},
writable: true,
enumerable: true,
configurable: true,
},
});
I want to understand this part of the following Typescript code here:
value(this: HTMLBodyElement): NodeListOf<Element>
I believe this code is overriding the standard querySelectorAll
method, therefore simulating Shadow DOM. But the method is being defined on an Element
, yet the value for this
in the function is HTMLBodyElement
. Does this mean the method can only be called from a body
element? Or perhaps it's called from Element
and then casted to HTMLBodyElement
? Can someone explain the logic of this code? This is a part of the following LWC source. I know there are some people here that probably wrote this code so any help is appreciated.