Make xDOM access and manipulate like scss

with dollar symbol '$'

scss is elegant for us to style a document like this!

.selector h3:before { content: "hi" }
#container {
  &:before { content: "hi" }
  .child {
    background: gray;
  }
}

What if we can access and manipulate DOM like this?

$`.selector h3`.textContent = "hi";
$`#container`($ => {
  $.textContent = "hi";
  $`.child`.setAttribute('data-background', 'gray');
})

What if we can access and manipulate VDOM like this?

//React
$`.selector h3`.props.children = "hi";
$`#container`($ => {
  $.props.children = "hi";
  $`.child`.props['data-background'] = 'gray';
})

Above is recommended ES6 style, ES5 style is available too.

$(".selector h3").textContent = "hi";
$("#container", function($) {
  $.textContent = "hi";
  $(".child").setAttribute('data-background', 'gray');
})

Why

• use a common way to access and manipulate xDOM
• parent node can be cached
• serverside rendering can be more flexible

code will be update soon.