Document prereqs / polyfills
matthewp opened this issue · comments
Custom elements, template tag, Maps, to start.
Have you tried to make it work with the different webcomponents polyfills?
Does it works avec the current stable of webcomponentsjs v0.7.23? Or with the [skatejs webcomponents polyfill[(https://github.com/skatejs/web-components)?
I guess the best way to know is to try... I'm going to do it :)
It works with https://github.com/webcomponents/custom-elements, https://github.com/webcomponents/shadydom, and https://github.com/WebReflection/document-register-element. The Skate one is a combination of the above, so that should work too.
I've tried to make it work with the Skate polyfill, and it didn't work as intended.
Style is done inside the document template in a Polymer-like way:
<template id="simple-element-template">
<style>
:host {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
display: flex;
width: 300px;
height: 300px;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border-radius: 5px;
color: white;
background-color: black;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}
img {
cursor: pointer;
}
</style>
<img src="../img/testing-bram.png" on-click="handleClick">
<h1>Clicks: {{count}}</h1>
</template>
<script>
class SimpleElement extends Bram.Element {
static get template() {
return '#simple-element-template';
}
constructor() {
super();
this.model.count = 0;
}
handleClick() {
this.model.count++;
}
}
customElements.define('simple-element', SimpleElement);
</script>Without Polyfill it works nice on Chrome, and Firefox ignores the element (as it should, it hasn't Custom Element yet).
With Skate polyfill, in Firefox, it kinda works... I mean, everything works besides the <style> inside the element:
Do you want me to submit a full issue for this?
I'm doing other tests, I'm putting them in a GitHub repo in order to make easier to share them.
Same thing (inner CSS style is ignored) when using directly custom-elements and shadydom polyfills.
I am sure I'm missing something, but I have no idea of what yet...
OK, I made it work by adding yet another polyfill to the mix: shadycss.
Some extra code lines are needed, in order to allow ShadyCSS to prepare the templates in browsers not supporting native shadow CSS:
<script>
ShadyCSS.prepareTemplate(simpleElementTemplate, 'simple-element');
class SimpleElement extends Bram.Element {
static get template() {
return '#simpleElementTemplate';
}
constructor() {
super();
ShadyCSS.applyStyle(this);
this.model.count = 0;
}
handleClick() {
this.model.count++;
}
}
customElements.define('simple-element', SimpleElement);
</script>Thanks @LostInBrittany, I'm currently working on guides and specifying the polyfills needed is part of that. You can see my progress in the guides branch: https://github.com/matthewp/bram/tree/guide/docs/doc
Will be sure to add the need for shadycss if using styles inside of shadow dom like that.
Thanks to you! As a big Polymer and webcomponents fan, I am thrilled to discover Bram.
I've just set-up a repo with my tests, going to add some compatibility tests with Polymer and Skate: https://github.com/LostInBrittany/testing-bram
Please tell me if you need/want some help (with coding, doc, testing...), I'd be really happy to give a hand if needed/wanted.
That test repo is awesome :) Yeah, any contributions you want to make are more than welcome. I'm giving a talk at the Web Components Remote Conf next month, so most of my free time is going to be working on that for the next month or so. So updates to Bram will be less frequent.
But what I'm hoping is to finish off the guides so that Bram will be good enough for a 1.0 release. If there are parts of Bram that you don't understand, please file issues, or if you have ideas for docs that would be quite helpful too.
If you want to Watch this repo, I'll start adding some issues in the next few days about various things, please chime in if you have opinions or want to take something on. 😁
We are in the same ship, I'm also giving a talk at Web Components Remote Conf, we are even side by side on their speakers page :D
I'm watching this repo, and I'm going to continue my tests, reporting issues, giving opinions and, if I'm able, giving a hand on the eventual issues.
For the moment I really like what I've seen of Bram. Today after work I'm going to try to put Bram elements in one of my Polymer apps, I'll keep you informed :)
Hah, I knew your avatar looked familiar from somewhere 🙃, best of luck on your talk! Looking forward to hearing more from you about Bram.
I added a page here: https://bramjs.org/compat.html
Since there's a lot of setup involved (as you experienced), I'm wondering if it would make sense to have a bundle, like bram.all.js perhaps, that includes all of the needed polyfills packed with Bram. What do you think?
It could be really nice for a Hello World or for discovering Bram, so I really agree :)
Closing, never got around to this and now the polyfills are less necessary. I'll leave this to others to document.