GithubHelp home page GithubHelp logo

Comments (6)

WebReflection avatar WebReflection commented on July 22, 2024

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.

WebReflection avatar WebReflection commented on July 22, 2024

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.

WebReflection avatar WebReflection commented on July 22, 2024

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.

WebReflection avatar WebReflection commented on July 22, 2024

Actually you know what? I think your expectations should be matched.

from hyperhtml-element.

WebReflection avatar WebReflection commented on July 22, 2024

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.

pinguxx avatar pinguxx commented on July 22, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.