Habe mir ein Custom HTMLElement (my-elem) erstellt mit einem Attribute foo.
Das Element beherbergt ein Input mit dem dieses Attribute foo geändert werden kann. Funktioniert soweit auch.
Wenn ich nun von aussen nach einem Buttonclick via JS darauf zugreife kann ich mir mit getAttribute(“foo”) auch den geänderten Wert anzeigen lassen.
Ebenfalls im Inspektor wird das Attribute geändert wenn man es eben ändert.
Was ich allerdings gerne hätte wäre ein EventListener auf dem my-elem, der bei einer Änderung des Attributes eben reagiert. Und dieser reagiert eben nicht.
Würde mich freuen, wenn mir das jemand erklären könnte.
Anbei ein Fiddle, das den Sachverhalt etwas verdeutlicht
Also wenn inputElement.value bereits geändert ist, wieso sollte es über den Listener nochmal geändert werden? Das macht keinen Sinn.
Ein ChangeListener auf einem inputElement macht ja nur für Objekte Sinn, die den geänderten Wert aktualisieren müssen. Dein externer Listener landet aber in der Tag-Definition, weswegen er per zusätzlicher Methode an inputElem delegiert werden muss.
Etwa so: https://jsfiddle.net/2ty6rup8/
das war auch nur ein vereinfachtes Beispiel, weswegen das delegieren des Handlers, dieses Problem zwar löst, aber das eigentliche Problem so nicht löst.
Konkreter, möchte ich mir ein Control bauen, das aus mehreren Input-Elementen besteht, aus den Eingaben ein Ergebnis berechnet und dieses nach aussen reicht wie ein einzelnes Input-Element.
Und deshalb wäre es schön gewesen direkt auf diesem Control einen EventListener zu platzieren, als ob es ein einziges Input-Element wäre.
Das Problem dabei ist allerdings, das ein EventListener eben nicht befeuert wird, wenn man die Werte via JS ändert.
Um diese Änderungen mitzubekommen bedarf es wohl eines MutationObservers um dann darin die Attribute durchzugehen https://dom.spec.whatwg.org/#mutation-observers
Das sieht aber sehr, sehr unhandlich aus, auch wenn es funktioniert. Kann man aber vielleicht passender machen.
Was ich ursprünglich wollte ist so wie ich es sehe, mit dem attributeChangedCallback hinzubekommen.
Allerdings will mir dies nicht so recht gelingen. Damit könnte ich auf dem Custom-Element anstelle des EventListeners, eben einen attributeChangedCallback setzen.
Mal die Tage nochmal einen neuen Anlauf wagen, vielleicht lag es ja nur irgendwo an einer Kleinigkeit.
Dazu muss man eigentlich nur ein bissl weiter denken.
Zunächst müssen die Compound-Elemente im Konstruktor erstellt werden und jedem von ihnen ein gemeinsamer Listener hinzugefügt werden, in welchem die Elemente ausgewertet und das Ergebnis dann per postmessage an den Element-Listener gesendet werden. Das ist auch nicht ganz trivial afaik. Evtl. hast du mit TypeScript da mehr Erfolg.