Comments (8)
@NickGard Multiple inheritance is orthogonal, but would also require this problem to be solved.
Here’s an example of using helpers to add element behaviors:
ElementClass.js:
import { defineProps, makeFormAssociated } from "util.js";
class ElementClass extends HTMLElement {
// stuff, including doing stuff when element is connected
}
defineProps(ElementClass);
makeFormAssociated(ElementClass);
util.js:
function defineProps (ElementClass) {
// Do stuff when ElementClass instance is connected, among other things
}
function makeFormAssociated (ElementClass) {
// Do stuff when ElementClass instance is connected, among other things
}
from html.
Lit has a reactive controller pattern which I think could work well, if something like ElementInternals
exposed more of the element's mechanics, such as lifecycle hooks. Lit's model is more like:
class MyElement extends LitElement {
#mouse = new MouseController(this);
}
MouseController
inherits from ReactiveController
which co-operates with LitElement
to hook into the lifecycle callbacks. I imagine the lit team (@justinfagnani can likely confirm) would benefit from there being a more general "lifecycle event dispatch" object, even if that were for example ElementInternals
; so the ReactiveController can become a bit like "Friends" in the C++ sense.
class MyElement extends HTMLElement {
#internals = this.attachInternals();
#mouse = new MouseController(this.#internals);
}
from html.
You basically need a lightweight pub/sub mechanism that doesn't carry the baggage of events
I'm curious about this statement. What's the baggage? What if, for example, ElementInternals
inherited EventTarget
, and that's where those events were dispatched?
from html.
You basically need a lightweight pub/sub mechanism that doesn't carry the baggage of events
I'm curious about this statement. What's the baggage? What if, for example,
ElementInternals
inheritedEventTarget
, and that's where those events were dispatched?
I’m not actually sure, but my understanding was that the web platform got a bunch of Observer objects for certain things (MutationObserver, IntersectionObserver, ResizeObserver, etc) because using events for it would have been too slow. If events are acceptable, that is obviously a better solution. Though whatever API is chosen should work with native elements too. Would it be possible to get access to their ElementInternals
object?
from html.
MutationObserver
just needed a callback so that's why it was designed that way. I strongly suspect the other observers are copypasta. I don't think it had to do with cost per se. The cost of having to call into JS from C++ prolly dwarfs the cost of an event listener callback vs a regular callback.
from html.
EventListener callback itself isn't really any different to other callbacks.
Event dispatch through DOM does add overhead, since one needs to create DOM path for the dispatch, but that cost doesn't really apply if the event doesn't propagate outside its target (which is the case with non-DOM-Node-non-IndexedDB EventTargets).
The reason for MutationObserver (which is the first *Observer) design is that we wanted to optimize out dispatching tons of events all the time, like what happens with Mutation Events. And since MutationObserver didn't really have any need for being an EventTarget (since it handles only one types of 'events'/'notifications') it was enough to give it a callback.
from html.
MutationObserver realmente no tenía ninguna
from html.
composing multiple listeners from different sources
I don't understand what this means. Is this about multiple inheritance? Like
class WebComponentA extends HTMLElement {
connectedCallback() {
console.log('A');
}
class WebComponentB extends WebComponentA {
connectedCallback() {
super.connectedCallback();
console.log('B');
}
from html.
Related Issues (20)
- Let Form-Associated Custom Elements match :required, :optional, and :autofill pseudo-selectors HOT 1
- Let Form-Associated Custom Elements match :in-range, and :out-of-range pseudo-selectors
- What does return content attribute of template element? HOT 2
- Confusion between the visual effect and the dropEffect attribute in drag-n-drop events in spec
- Spec allows multiple values for dropEffect in some effectAllowed cases which might cause different browsers to behave differently
- Spec allows multiple values for dropEffect in some current selection case which might cause different browsers to behave differently
- If a web author sets dropEffect to something that is not allowed according to spec, should UA respect their choice by updating dropEffect attribute?
- template.content has unusable value HOT 1
- Clean up HTML <-> DOM hooks HOT 2
- Consider improving interoperability of <iframe> throttling margins. HOT 10
- The dropEffect column in the Drag and Drop events summary table should clarify it represents default values.
- Drag and drop spec allows multiple values for dropEffect which might cause browsers to behave differently.
- How should UAs handle web authors setting dropEffect values?
- Proposal for event ordering when inserting replacement text such as text prediction, spell checker, etc
- It's unclear how shadows should be drawn across various compositing operators HOT 2
- Should custom validity error message treat \r as newline? HOT 3
- Upcoming WHATNOT meeting on 5/16/2024 HOT 5
- Date Picker popup doesn't propagate shadow DOM events into the light DOM HOT 1
- Clarify `detail` value of synthetic click event HOT 3
- Consider making "gamepadconnected" part of “activation triggering user event”? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from html.