Атрибут веб-компонентаChangedCallback не вызывается для атрибута DISABLED
Как мой пользовательский элемент/веб-компонент может обнаружить изменение атрибута DISABLED?
static get observedAttributes() {
return ['checked', 'disabled', 'value'];
}
Мой атрибутChangedCallback() не вызывается?
Вау, спасибо за быстрый ответ! Я могу предоставить SSCCE, но вы предоставили мне достаточно доказательств, чтобы перейти к более широкой картине. Мой первоначальный вопрос сводился к ошибке школьника от моего имени (забыть Disabled = "false" все равно означает DISABLED) stackoverflow.com/questions/78138609/… но в этом коде я не получаю атрибут AttachChangedCallback на Переключить :-( в любом случае я задам более серьезный вопрос: почему FF правильно останавливает события CLICK в ShadowRoot, но почему все все еще всплывают события INPUT из ОТКЛЮЧЕННОГО веб-компонента
Хорошая ссылка! Буду читать. Измените свой код на свойство .disable=true вместо setAttrinute("disabled", "blah"), и вы поймете, что я имею в виду.
Но зачем .disabled здесь что-то делать? Мой элемент не извлекает ничего для ввода или любого другого элемента, который имел бы такой атрибут IDL.
Я не понимаю :-( Вы хотите сказать, что «setAttribute(»disabled») вполне разумно, а .disabled — глупо?
Не "глупый", но, наверное, ввёл в заблуждение. .disabled, точно так же, как «официальные» отключенные атрибуты существуют только для некоторых элементов (в основном элементов управления формой). Например, при <div> он вернет undefined, и его установка ничего не даст, но при <input> он вернет логическое значение, и его установка установит атрибут. Ваш пользовательский элемент здесь похож на div, он не знает об этом атрибуте IDL.
Но у моего компонента ЕСТЬ элемент ввода флажка
Во-первых, вы этого не показываете, поэтому мы не можем говорить об одном и том же, потому что я не медиум. И затем, «имеет» ли он его, поскольку один из его дочерних элементов является входными данными, или он сам «является» им, как в случае, когда вы объявляете его класс с помощью extends HTMLInputElement, а затем используете is? Если первое, то это все равно как div. Обратите внимание, что последнее не будет работать в Safari.
Это первое. Спасибо. Обратите внимание, что FireFox ведет себя правильно, не позволяя событиям щелчка выходить из теневого DOM, если мой компонент отключен. Как ни странно, и Chrome, и FireFox позволяют событиям ввода подэлементов всплывать и предоставляют полный метод ComposedPath(). Я скоро обновлю stackoverflow.com/questions/78138609/….
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете объявить disabled как свойство получения/установки в своем веб-компоненте.
Для элементов, у которых по умолчанию нет свойства disabled:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
<my-element disabled ></my-element>
<script>
function log(...args) {
console.info(...args)
}
customElements.define('my-element',
class extends HTMLElement {
static get observedAttributes(){
return ["disabled"];
}
attributeChangedCallback(name, oldValue, newValue){
log("attributeChanged",name,oldValue,newValue)
}
connectedCallback() {
log("connectedCallback");
this.disabled = !this.disabled;
};
get disabled(){
log("GET disabled", this.hasAttribute("disabled"));
return this.hasAttribute("disabled");
}
set disabled(v){
log("SET disabled", v);
this.toggleAttribute("disabled",v);
}
});
</script>
Сеттер немного сбит. Это должно выглядеть так: set disabled(v) { this.toggleAttribute('disabled', v); }.
Это должно сработать™ jsfiddle.net/5132zr9f Вы расширяете другой конструктор, кроме HTMLElement? Используете ли вы внутренние элементы вашего элемента, связанные с формой? В общем, не могли бы вы поделиться минимально воспроизводимым примером?