Bee - A Collection of lightweight Dart Web UI Components
blossom.io
blossom.io
<span on-click="query('.q-example-overlay').xtag.show()">Launch Overlay</span>
<x-overlay width="600px" class="q-example-overlay">
Does that then get transpiled into valid HTML (and inline javascript?) or is that what's actually served to the browser?Right now there is a lot of stuff happening to simulate Web Components. Going forward they will become a W3C Standard and we can reduce the complexity. You might want to look at the current Draft https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/...
What’s happening at the moment is that the output for <x-loading></x-loading> is:
<span is="x-loading">
<style>
@-webkit-keyframes x-loading-dot {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.x-loading-one {
opacity: 1;
-webkit-animation: x-loading-dot 1.3s infinite;
-webkit-animation-delay: 0.0s;
}
.x-loading-two {
opacity: 1;
-webkit-animation: x-loading-dot 1.3s infinite;
-webkit-animation-delay: 0.2s;
}
.x-loading-three {
opacity: 1;
-webkit-animation: x-loading-dot 1.3s infinite;
-webkit-animation-delay: 0.3s;
}
</style>
<span class="q-x-loading" style="color: rgb(80, 80, 80);">
<span class="x-loading-one">.</span><span class="x-loading-two">.</span><span class="x-loading-three">.</span>
</span>
</span>
If a component like the overlay also contains logic the code will be added to your compiled and minified JavaScript output.For blossom.io/bee you can find the compiled output here https://www.blossom.io/bee_documentation.html_bootstrap.dart...