litedom
litedom copied to clipboard
css directive bug when use with normal css class
I found some bugs when use css directive with normal css class name. How to reproduce: i use parcel as bundler.
/* html */
<style>
body, html {
font-family: 'Cascadia Code';
margin: 0;
padding: 0;
}
.box {
padding: 10px;
color: #fff;
background-color: #88a343;
}
.redBG {
background-color: red
}
.blueBG {
background-color: blue;
}
</style>
</head>
<body>
<div id="myContainer">
<div>Counting {this.count}</div>
<div :class="blueBG: this.count > 20" class="box">
Will have .blueBG and .box if count is {this.count}.
</div>
</div>
<script src="main.js"></script>
</body>
</html>
/* main.js */
import Litedom from 'litedom/dist/litedom.es'
Litedom({
el: '#myContainer',
// reactive data
data: {
count: 60,
},
});

It should be ...