joicomponents
Version:
Design patterns to build native web components
33 lines (24 loc) • 953 B
HTML
<html lang="en">
<body>
<script type="module"></script>
<example-component id="ex1" style="display: inline-block; width:100%;">
<span> ExampleComponent a ExampleComponent a ExampleComponent a ExampleComponent a ExampleComponent a</span>
<span> ExampleComponent ab ExampleComponent ab ExampleComponent ab ExampleComponent ab ExampleComponent ab</span>
<span> ExampleComponent abc ExampleComponent abc ExampleComponent abc ExampleComponent abc ExampleComponent abc</span>
</example-component>
<script type="module">
import {ResizeMixin} from "../../src/layout/ResizeMixin.js";
class ExampleComponent extends ResizeMixin(HTMLElement) {
resizeCallback(rect) {
console.log(rect);
}
}
customElements.define("example-component", ExampleComponent);
setInterval(() => {
let el = document.querySelector("#ex1");
el.style.width = (parseInt(el.style.width)-1)+"%";
}, 3000);
</script>
</body>
</html>