Fixed a bug relating to custom-elements's first vnode where render(){ return <div class="example" /> } would set the example-class on the custom-element itself.
Added support for className and style similar to react Cleaned up some comments Reworked how tests are built in order to add a new test "pdf" which was a small side-project where previous mentioned bug showed up, it's an example using HTML to create a PDF for printing
This commit is contained in:
43
tests/svg/svg-tester-two.jsx
Normal file
43
tests/svg/svg-tester-two.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx";
|
||||
import {SvgLoader} from "./svg-loader";
|
||||
|
||||
@defineElement('svg-tester-two')
|
||||
export class SvgTesterTwo extends CustomElement{
|
||||
// Constructor
|
||||
constructor(){
|
||||
super();
|
||||
}
|
||||
|
||||
// Private properties
|
||||
states = [
|
||||
{ inverted: true, invertedColor: "#F00"},
|
||||
{ inverted: true, invertedColor: "#FF0"},
|
||||
{ inverted: true, invertedColor: "#0FF"},
|
||||
{ inverted: false},
|
||||
{ inverted: true, invertedColor: "#0F0"},
|
||||
];
|
||||
|
||||
// Properties
|
||||
@State() state = this.states[0];
|
||||
|
||||
// Handlers
|
||||
|
||||
// CustomElement
|
||||
connectedCallback() {
|
||||
setInterval(()=>{
|
||||
// Moving state
|
||||
let curIndex = this.states.indexOf(this.state);
|
||||
this.state = this.states[(curIndex+1)>=this.states.length?0:curIndex+1];
|
||||
}, 1000);
|
||||
super.connectedCallback();
|
||||
}
|
||||
|
||||
render(){
|
||||
// invertedColor instead of inverted-color is the only difference!
|
||||
return (
|
||||
<Host>
|
||||
<SvgLoader inverted={this.state.inverted} invertedColor={this.state.invertedColor} />
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user