Corset — Cascading Binding Sheets

This content originally appeared on Bram.us and was authored by Bramus!

Matthew Philips made something odd-looking: a JavaScript framework that lets you add DOM bindings using a CSS-like syntax.

Says your framework of choice generates this markup:

<div class="counter">
  <button
    type="button"
    class="increment">Increment</button>
  <button
    type="button"
    class="decrement"
    disabled>Decrement</button>

  <div
    class="result">
    Count: <strong class="count">0</strong>
  </div>
</div>

Using Corset, you can then add behavior as follows:

import sheet, { mount } from 'https://cdn.corset.dev/v1';

mount(document, class {
  count = 0;

  bind() {
    const { count } = this;

    return sheet`
      .counter {
        --count: ${count};
        --inc: ${() => this.count = count + 1};
        --dec: ${() => this.count = count - 1};
      }
      
      .count {
        text: var(--count);
      }
      
      .increment {
        event[click]: var(--inc);
      }
      
      .decrement {
        attr-toggle[disabled]: ${count === 0};
        event[click]: var(--dec);
      }
    `;
  }
});

Here’s a working demo using the code posted above:

See the Pen
Counter example by Matthew Phillips (@matthewp)
on CodePen.

Corset — Cascading Binding Sheets →

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2022-03-15T20:53:08+00:00) Corset — Cascading Binding Sheets. Retrieved from https://www.scien.cx/2022/03/15/corset-cascading-binding-sheets/

MLA

" » Corset — Cascading Binding Sheets." Bramus! | Sciencx - Tuesday March 15, 2022, https://www.scien.cx/2022/03/15/corset-cascading-binding-sheets/

HARVARD

Bramus! | Sciencx Tuesday March 15, 2022 » Corset — Cascading Binding Sheets., viewed ,<https://www.scien.cx/2022/03/15/corset-cascading-binding-sheets/>

VANCOUVER

Bramus! | Sciencx - » Corset — Cascading Binding Sheets. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/15/corset-cascading-binding-sheets/

CHICAGO

" » Corset — Cascading Binding Sheets." Bramus! | Sciencx - Accessed . https://www.scien.cx/2022/03/15/corset-cascading-binding-sheets/

IEEE

" » Corset — Cascading Binding Sheets." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2022/03/15/corset-cascading-binding-sheets/. [Accessed: ]

rf:citation

» Corset — Cascading Binding Sheets | Bramus! | Sciencx | https://www.scien.cx/2022/03/15/corset-cascading-binding-sheets/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.