![]() In this example, we're describing each property as simple static scalar values. So instead of keying our styles off of a host attribute, we'll just pass a class and do it that way: īecause of this, it also makes sense in Hybrids-land to not reflect properties to attributes either (In the section on factories we'll discuss an alternative that would let us do this). The only way to guarantee an attribute binding is to explicitly bind a string as attribute value i.e. If, however, that property doesn't exist in the element prototype, Hybrids sets the attribute using setAttribute. If it does, hybrids assigns the value using =. When you bind some value bar to some property foo (by setting in the template), Hybrids checks to see if a property with that name exists on the element's prototype. So how did we bind to the aria-hidden attribute above? Therefore, there's no way to explicitly bind to an attribute of an element in templates. Hybrids takes a strongly opinionated stance against the use of attributes in elements' APIs. In our previous implementations, we used a loaded attribute on the host element to style the image and placeholder, so why are we using class on them now? Notice also that we're importing a dispatch helper from hybrids to make firing events a little less verbose. Even though its body references the element itself, there's no this binding to worry about! We could easily unit test this handler without instantiating our element at all. ![]() Since Hybrids emphasizes pure functions, we can extract the onLoad handler to the root of the module. onclick, onloaded-changed) and take the host element, rather than the event, as their first argument, so the function signature is (host: Element, event: Event) => any.
0 Comments
Leave a Reply. |