example.css

:root{
    --mycolor:yellow;
    --myAngle:45deg;
}




.clr-red {
    color: #FFDDDD;
}

.bg-blue {
    background-color:#1133aa;

}



.gekanteld {
    transform:rotate(30deg);
}

.my-box EXTENDS .clr-red AND .bg-blue AND .gekanteld {
    border: 2px solid black;
    padding:3px;
}

.my-dialog EXTENDS .my-box {
    font-size: 1em;
    position:absolute;
    top: 50%;
    left:50%;

}

.dlg APPLIES my-dialog {}
.dlg APPLIES [key="value"] {}

#btn1 ONCLICK + buttonclicked {}  /*add substate */
#btn2 ONCLICK ~ buttonclicked {}  /*delete substate*/
#btn2a ONCLICK -buttonclicked {}  /*delete state*/
#btn3 ONCLICK   btn3clicked[data-value] {}
#btn4 ONCLICK   load[data-value] {}
#btn5 ONCLICK > alt_sub_state {}
#btn7 ONCLICK .allway_add_state {}  /*always add thr state string to the path*/
#btn8 ONCLICK #absolute_state {}
#btn9 ONCLICK ~ * {}
#btn10 ONCLICK > .alt_sub_state {/*toggle last state*/}
#btn11 ONCLICK :empty [void="alert('hoi')"]  {} /*do some js function */



#mytext WHEN buttonclicked *{
    background-color:var(--mycolor);
}

#mycheck WHEN * buttonclicked *{
    transform:rotate(var(--myAngle));

}

#dlg1 WHEN btn3clicked[data-value]{
    content:"'${data-value}'";
    background-color: red;
}


#myrange ONCHANGE rotate[angle="`${value}deg`"][bkgcolor="`rgb(${value},0,${value})`" ] {}

#dlg1{
    --angle:45deg;
    --bgcolor:#FFFFFF;
}

#dlg1 WHEN rotate [bgcolor="'${bkgcolor}'"]{

    transform:rotate(var(--angle));
    background-color:var(--bgcolor);
}



#angle WHEN rotate[value]{
  content:'${value}';
}

nav>ul li ONCLICK navigeer[link] {}
nav>ul li{
    display:inline;
    border:1px solid black;
    margin:3px;
    padding:3px;
}

main>article WHEN navigeer * [link][test="'${link}'"] [bgcolor="new Promise( function(res, rej) { window.setTimeout( function(){ res('lightblue');}, 2000); }) "] {
    content:url(`${link}.html`);
    background-color: var(--bgcolor,pink);
}

main>article {
    min-width:80vw;
    min-height:30vh;
    border:1px solid black;
}

main>article WHEN navigeer * [link] WHEN V{
    background-color: green;
}

simple-component COMPONENT hello {
    display:block;
    width:150px;
    padding:0px;
    overflow:hidden;
    content:"'Hello world'"
}

date-component COMPONENT newDate [templateId="date-component"] {
    display:block;
    width:150px;
    padding:0px;
    overflow:hidden;
    /*          content:"<input name='day'><input name='month'><input name='year'>";*/
}

time-component COMPONENT newTime [templateUrl="time-component.html"] {
    display:inline-block;
    width:150px;
    padding:0px;
    overflow:hidden;
    /*          content:"<input name='day'><input name='month'><input name='year'>";*/
}

div[sizing]{
    background-color: red;
    width:50%;
    height:30px;
    content:"`a long sentence to show how the SIZE keyword can be used`";
    white-space:nowrap;
    overflow-x: hidden;
}

div[sizing] SIZE  elm.width > elm.widthFor[text="A long text demonstrating the SIZE keyword"]  {
  content:"`A long text demonstrating the SIZE keyword`";

}

div[sizing] SIZE  elm.scrollWidth > elm.width  {
  content:"`Short text`";

}
select[name="gender"]{
    content:"'<option>male</option><option>female</option>'";
}

form[name="register"] [name] MODEL person{

}