Comments (6)
so ... you want booleans then you use setAttribute
? if you els[1].active = false
you'll have observed behavior through attributeCHangedCallback
, otherwise you can define whatever you want through all options.
Boolean attributes are meant to be used like in <button disabled=${true || false} />
or button.disabled = true || false
from hyperhtml-element.
also, just to be sure we are on the same page, to make boolean attributes observable you simply add the name in observedAttributes
meaning it's more flexible but also more semantic.
To have what you need automatically you can simply write:
static get booleanAttributes() { return ['active']; }
static get observedAttributes() {
return this.booleanAttributes.concat('attr1');
}
That would work better with inheritance too.
TL;DR the idea of keeping boolean a part from magic behavior was meant, which is why those are defined before observedAttributes so that there are no interferences.
In this way all possibilities are open and putting a behavior together isn't difficult at all.
The most common use case for booleans in hyperHTML/Element is to define them right away while observing has a cost and if I can avoid implicitly adding a cost for all booleans used simply to style components or communicate a state, I'm happy doing that way.
I hope it's clear why it's like this, and I'll close this for now and I'll change eventually if convinced there is a need to penalize all boolean attributes by default.
from hyperhtml-element.
After thoughts ... is it the render()
that you are missing in there ? now that might be indeed handy to trigger on boolean changes, would that work? Still I wouldn't make booleans observable by default.
from hyperhtml-element.
Actually you know what? I think your expectations should be matched.
from hyperhtml-element.
Sorry for the monologue-storming ... I've fixed it, if you update dependencies in your example everything should work as expected.
Please let me know if that's not the case.
from hyperhtml-element.
seems to be working, thanks for the fix, i think this is much better, no worries about the monologue i get to see your thought process on things, it's actually very helpful
from hyperhtml-element.
Related Issues (20)
- Set rendering HOT 1
- HyperHTMLElement.define('my-tag', class {...}) please HOT 2
- Basic question on how to use it HOT 1
- Add greenkeper HOT 2
- Question: support template element for single file components HOT 2
- How about support for ref attributes HOT 6
- Add link to docs HOT 2
- Proposal: automatically add getter and setter for not primitive values HOT 4
- An in-range update of rollup is breaking the build 🚨 HOT 11
- es5-test: Uncaught TypeError: Failed to construct 'HTMLAnchorElement' HOT 1
- An in-range update of hyperhtml is breaking the build 🚨 HOT 1
- Console Error/Rendering Issue in ES5 Test Page HOT 4
- extending built-in elements with a base class different than HyperHTMLElement doesn't work HOT 4
- this.refs is not documented HOT 2
- Uncaught TypeError: Cannot read property 'define' of null HOT 4
- Ensure observed/boolean attributes passes through the prototype
- double render call on initial element creation HOT 4
- Alternative to `on` prefix for event listeners HOT 1
- Boolean attributes written in the kebab case are overridden by common observable attributes HOT 11
- Cannot define `get defaultState` with TypeScript 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 hyperhtml-element.