data:x binding

[Rich-Harris]

Just throwing an idea out there. I've run into a situation where it would be handy to attach data to DOM nodes:

<Scroller bind:index>
  <div slot='background'>
    <p>
      this content is fixed as soon as we reach the first section, but changes
      according to which section is active (currently {{index}})
    </p>
  </div>

  <div slot='foreground'>
    <section>
      <p>
        this is the first section. these scroll normally. when we get to the bottom, the
        background unfixes and scrolls away
      </p>
    </section>

     <section>
      <p>this is the second section</p>
    </section>

     <section>
      <p>this is the third section</p>
    </section>
  </div>
</Scroller>

The <Scroller> component has a scroll handler that determines which <section> element currently spans the middle of the window, and sets index accordingly.

It would be convenient to be able to attach data to the <section> elements:

<Scroller bind:section>
  <div slot='background' style='background-color: {{section.color}}'>
    <p>
      this time, the background changes colour as we scroll
    </p>
  </div>

  <div slot='foreground'>
    <section data:color='red'>...</section>
    <section data:color='blue'>...</section>
    <section data:color='green'>...</section>
  </div>
</Scroller>

My idea is that a data:x binding would simply add a data property to the node in question:

const sections = this.refs.foreground.querySelectorAll('section');
sections[0].data; // { color: 'red' }

It might be a terrible idea, and there are certainly other ways to achieve the same end result. (A data-color attribute isn't one of them though — data attributes can only contain strings, limiting their usefulness.) But perhaps other people have encountered similar needs?

[arxpoetica]

I don't think it's a terrible idea, but we should document the overhead created when binding direct data to native HTML. If people thought this was standard practice, it could slow down large apps with heavy data attributes.

[Rich-Harris]

This hasn't really come up again since I opened this issue, so I'm going to close it

[lsimichael]

@Rich-Harris

I just tried this, assuming it worked like class... i.e, data:foo={false}

My question is, how would I conditionally show the data attribute, in the case that I have a CSS selector checking for the existence of the data attribute ([data-foo])?

This may be similar to... Data attribute without value is assigned the string "true" #2803

[Conduitry]

The way that should be done - data-foo={bar} where bar is undefined or null - does not work. I've opened an issue.