rock out!
Domponent rocks! 

<!-- Navigation -->
<!-- css classes have been removed -->
                    
<div data-component="Navigation" data-state='{"opened":false}'>
  <button data-action="click->Navigation.toggle">
    <span data-ref="open">
    <i>open icon</i>
    </span>
    <span data-ref="close">
    <i>close icon</i>
    </span>
  </button>
  <div data-ref="menu">
    <!-- That Regular Show image you see -->
  </div>
</div>


 
import { Component } from "domponent";
import "./Navigation.scss";
    
export default class Navigation extends Component {
  constructor(conf) {
    super(conf);
    this.styleID = "collapse-comp-styles";
    
    this.changeNav = this.changeNav.bind(this);
  }
    
  toggle() {
    this.setState({ opened: !this.state.opened }, this.changeNav);
  }
    
  changeNav() {
    if (this.state.opened) {
      this.menu.classList.add("show");
      this.open.style.display = "none";
      this.close.style.display = "block";
    } else {
      this.menu.classList.remove("show");
      this.open.style.display = "block";
      this.close.style.display = "none";
    }
  }
}

🔌
<DOMponent />

Build components with the HTML you already have.
GitHub | Docs | ES5
Note: This example uses a state management system called substate. But all the UI is being manipulated with Domponent 🤓
Regular Counter
count: 19 


<!-- Counter -->
<!-- css classes have been removed -->
<div data-component="Counter" data-key="parentCounter">
  <p data-bind="state:Counter.count">0</p>
  <button data-action="click->Counter.increment">
    +1
  </button>
  <button data-action="click->Counter.decrement">
  -1
  </button>
</div>


import { Component } from 'domponent';
import "./Counter.scss";

export default class Counter extends Component {
  constructor(conf) {
    super(conf);
    this.state = {
      count: parseInt(this.state.count) || 0,
      isEven: this.state.isEven
    };
    this.setState(this.state);
    this.setEven();
  }
      
  increment(e) {
    const newState = {};
    const largerCount = parseInt(this.state.count + 1, 10);
    newState.count = largerCount;
    newState.isEven = largerCount % 2 === 0;
    this.setState(newState, () => console.log("Single Callback", this));
  }
      
  decrement(e) {
    const newState = {};
    const fewerCount = parseInt(this.state.count - 1, 10);
    newState.count = fewerCount;
    newState.isEven = fewerCount % 2 === 0;
    this.setState(newState);
  }
      
  stateDidUpdate() {
    this.setEven();
  }
      
  setEven() {
    if (this.state.isEven) {
      this.$root.classList.add("even");
    } else {
      this.$root.classList.remove("even");
    }
  }
}
Another Regular Counter

I retain my scope. No memory leaks. ;)

count: 6

This is a child Exponent. There is no state.

props:

                        
                      

<!-- DisplayAnthing -->
<!-- css classes have been removed -->
                                 
<div data-props="isTopCounterEven<-parentCounter:isEven|topCount<-parentCounter:count" 
  data-component="DisplayAnything">
    <p>
      This is a child Exponent. There is no state.
    </p>
  <p>props:</p>
  <pre>
    <code data-ref="DisplayAnything.objects">
    </code>
  </pre>
</div>


import { Exponent } from "domponent";
import "./DisplayAnything.scss";
    
export default class DisplayAnything extends Exponent {
  constructor(el) {
    super(el);
    this.displayProps();
  }
    
  propsDidUpdate() {
    this.displayProps();
  }
    
  displayProps() {
    this.objects.innerHTML = JSON.stringify(this.props, null, 1);
  }
}
Counter where the increment button is bound just once.
count: 0
What's Your Favorite Show?
Regular Show 

<!-- FavoriteShow -->
<!-- css classes have been removed -->

<div data-component="FavoriteShow" data-state='{"show":"Regular Show"}'>
  <strong>What's Your Favorite Show?</strong>
    <label>
    controlled from below
  </label>
  <textarea data-ref="FavoriteShow.secondInput">Regular Show</textarea>
  <code data-bind="state:FavoriteShow.show">Regular Show</code>
  <label>
    Controls the text and input above
  </label>
  <textarea data-action="input->FavoriteShow.handleInput">Regular Show</textarea>
</div>                   


import { Component } from "domponent";
import './FavoriteShow.scss';

export default class FavoriteShow extends Component {
  constructor(conf) {
    super(conf);      
  }
    
  handleInput(event) {
    this.setState({ show: event.target.value });
  }
    
  stateDidUpdate() {
    this.secondInput.value = this.state.show;
  }
}
Current Time: n/a: n/a: n/a 

<!-- Timer -->
<!-- css classes have been removed -->
        
<div data-component="Timer">
  <span data-bind="state:Timer.hours">n/a</span>:
  <span data-bind="state:Timer.minutes">n/a</span>:
  <span data-bind="state:Timer.seconds">n/a</span>
</div>


import { Component } from "domponent";
import './Timer.scss';
    
export default class CurrentTime extends Component {
  constructor(el) {
    super(el);
    this.state = {
      hours: "",
      seconds: "",
      minutes: ""
    };
    
    setInterval(() => {
      this.changeTime();
    }, 1000);
  }
    
  padDate(num) {
    if (num < 10) {
      return `0${num}`;
    }
    return num;
  }
    
  changeTime() {
    const date = new Date();
    this.setState({
      seconds: this.padDate(date.getSeconds()),
      hours: this.padDate(date.getHours()),
      minutes: this.padDate(date.getMinutes())
    });
  }
}

Inherits props from Timer, but isn't nested??!

WHOOOOOOOOOOOA!

props:
Counter that uses all default state
count: 0