Как переопределить/проксировать disabledCallback в пользовательских веб-компонентах
Я пытаюсь проксировать disconnectedCallback любого экземпляра пользовательского элемента. Вот урезанная версия попытки сделать это:
const template = document.createElement("template");
template.innerHTML = `<button id = "button">Click ME</button>`;
customElements.define("custom-test", class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
disconnectedCallback() {
console.info("Disconnected Callback")
}
},
);
let test = document.createElement('custom-test')
test = (function () {
const fn = test.disconnectedCallback;
test.disconnectedCallback = function () {
console.info("proxy function")
fn.apply(test)
}
return test;
})()
document.body.appendChild(test)
const div = document.createElement('div');
div.appendChild(test);
// Only outputs "Disconnected Callback"
Я ожидаю увидеть следующий вывод в консоли:
proxy function
Disconnected Callback
Но я вижу только вторую строку, игнорируя функцию прокси. Что мне нужно сделать, чтобы переопределить функцию?
Я пытался использовать метод new Proxy, но не могу этого сделать, потому что создаваемый им элемент Proxy нельзя использовать в методе appendChild.
Если я явно вызову disconnectedCallback элемент
test.disconnectedCallback()
// Outputs the proxy function too
он вызывает прокси, как в последней строке, он вызывает прокси.
@Danny'365CSI'Engelman Я пишу фреймворк и хочу заблокировать disconnectedCallback работу в определенном экземпляре appendChild, где я перемещаю элемент из одного раздела в другой пользовательского макета. Я не уверен, что вы подразумеваете под «Ваш отключенный обратный вызов выполняется по умолчанию», каждая операция узла, которую я вижу, игнорирует ее.
Тогда что произойдет, когда я это сделаю extends customElements.get("custom-test")
@ Danny'365CSI'Engelman вы получите стандартный конструктор класса без прокси. Что хорошо в моем случае использования - я пытаюсь расширить метод для конкретного экземпляра, а не для всего класса.
«Я пытаюсь проксировать disabledCallback любого экземпляра пользовательского элемента». - не. Вместо этого просто запустите событие и подпишитесь test.onDisconnect = () => console.info("proxy");.
@Bergi, к сожалению, это не сработает в моем случае использования, потому что я хочу заблокировать запуск disconnectedCallback в определенных случаях, что невозможно, как вы описываете. Я могу посмотреть и посмотреть, могу ли я использовать события по-другому, чтобы добиться этого.
О, я вижу, тогда, вероятно, лучше сделать <custom-test ignore-moves />, где размещение атрибута говорит компоненту, что он не мешает тому, что вам нужно сделать. Но в любом случае я считаю хорошей практикой, чтобы компонент знал, что (не) происходит, вместо того, чтобы пытаться обернуть/проксировать/украсить его.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Изучив это больше, я не думаю, что это возможно. Проблема в том, что функции, определенные в классе, такие как disconnectedCallback, определены в прототипе объекта и не могут быть переопределены таким же образом (и если есть способ, вы, вероятно, не должны этого делать).
Вместо этого я собираюсь создать миксин для класса, который обрабатывает поведение условного вызова функции отключения/подключения веб-компонента.
Почему вы хотите проксировать его? Ваш
disconnectedCallbackвыполняется по умолчанию