4 ms·

There are also simpler ways to write vanilla Web Components. Here's an example of the counter component written in what I find a simpler fashion. https://gist.g

There are also simpler ways to write vanilla Web Components. Here's an example of the counter component written in what I find a simpler fashion. https://gist.github.com/rjsteinert/779d94dfc886723c2967a6f5f56beecd https://gist.github.com/rjsteinert/779d94dfc886723c2967a6f5f...

akersten 6y ago
Wow, that's so much cleaner - why don't they just do it like this in the example? I'd be much happier learning standard web components if they were all a breath of fresh air like this. Personally I'd miss the JSX syntax, but this more than makes up for it by removing the entire whacky state vs. props thing. Although- how do you represent custom props here - arguments to the constructor? That'd be really elegant. Do those styles and query selectors leak out of the component? I'm assuming they don't since that's the entire point of the idea of a component, but just want to be sure.
- tshaddox 6y ago
  This probably works fine for a simple leaf component like this, but this won’t compose well either, right? If every render completely overrides innerHTML then won’t all DOM state of child components get wiped? My understand is that this is a primary reason for e.g. React’s virtual DOM.
  - allover 6y ago
    Exactly - the innerHTML approach doesn't work for component composition and it completely fails for things like forms, where you will blow away form input focus/cursor state etc. This was a stumbling-block of the fairly simplistic predecessors to the React/Angular generation - like in Backbone.js if you chose to implement 'render()' in such a naive way.
rishav_sharan 6y ago
Is there no Shadow DOM involved? love your way btw. Here is my no-class implementation from the vanillajs spa that I am working on https://github.com/rishavs/Verdin/blob/master/src/views/components/LikePost.js https://github.com/rishavs/Verdin/blob/master/src/views/comp... I just wish that one of these days I will get off my ass and actually finish something that I start :D
fuubi 6y ago
That looks very clean - cool! I applied the redux pattern to WebComponents a while ago https://gitlab.com/f.parrillo/web-components/-/tree/master/src/counter https://gitlab.com/f.parrillo/web-components/-/tree/master/s... .
- wolco 6y ago
  Is gitlabs down?
  - dmix 6y ago
    No, broken link, the linked code isnt publicly accessible on Gitlab apparently.
no_wizard 6y ago
I like that this illustrates how easy it is to make a web component. What I don't like is this also shows (via the render method) how you can foot gun yourself if you aren't careful. Just slabbing in everything via `this.innerHTML` will lead to gross performance problems, among other things. There's also no real diffing (only matters on more complex concerns, in a way) so you're replacing everything just to update the count. I know we're all suppose to know better (I doubt you did this except for the express purpose of showing just how simple the Web Component API can be), but I've seen example code end up in production more times than I can count, from all over the web, so be forewarned stewards!
sergeykish 6y ago
CSS pollutes global without <style scoped> or shadow root. Even simpler variant: <form> <button onclick="form.counter.value -= 1;return false">-</button> <input name="counter" value="0"> <button onclick="form.counter.value = 1 + +form.counter.value;return false">+</button> </form> Custom elements is just a mutation observer with callbacks, can be used with DOM 0 as well: class MyCounter extends HTMLElement { connectedCallback() { this.attachShadow({mode: 'open'}).innerHTML = `<style>...</style><form>...</form>` } } customElements.define('my-counter', MyCounter)

akersten 6y ago

Wow, that's so much cleaner - why don't they just do it like this in the example? I'd be much happier learning standard web components if they were all a breath of fresh air like this. Personally I'd miss the JSX syntax, but this more than makes up for it by removing the entire whacky state vs. props thing. Although- how do you represent custom props here - arguments to the constructor? That'd be really elegant. Do those styles and query selectors leak out of the component? I'm assuming they don't since that's the entire point of the idea of a component, but just want to be sure.

tshaddox 6y ago
This probably works fine for a simple leaf component like this, but this won’t compose well either, right? If every render completely overrides innerHTML then won’t all DOM state of child components get wiped? My understand is that this is a primary reason for e.g. React’s virtual DOM.
- allover 6y ago
  Exactly - the innerHTML approach doesn't work for component composition and it completely fails for things like forms, where you will blow away form input focus/cursor state etc. This was a stumbling-block of the fairly simplistic predecessors to the React/Angular generation - like in Backbone.js if you chose to implement 'render()' in such a naive way.

rishav_sharan 6y ago

Is there no Shadow DOM involved? love your way btw. Here is my no-class implementation from the vanillajs spa that I am working on https://github.com/rishavs/Verdin/blob/master/src/views/components/LikePost.js https://github.com/rishavs/Verdin/blob/master/src/views/comp... I just wish that one of these days I will get off my ass and actually finish something that I start :D

fuubi 6y ago

That looks very clean - cool! I applied the redux pattern to WebComponents a while ago https://gitlab.com/f.parrillo/web-components/-/tree/master/src/counter https://gitlab.com/f.parrillo/web-components/-/tree/master/s... .

wolco 6y ago
Is gitlabs down?
- dmix 6y ago
  No, broken link, the linked code isnt publicly accessible on Gitlab apparently.

no_wizard 6y ago

I like that this illustrates how easy it is to make a web component. What I don't like is this also shows (via the render method) how you can foot gun yourself if you aren't careful. Just slabbing in everything via `this.innerHTML` will lead to gross performance problems, among other things. There's also no real diffing (only matters on more complex concerns, in a way) so you're replacing everything just to update the count. I know we're all suppose to know better (I doubt you did this except for the express purpose of showing just how simple the Web Component API can be), but I've seen example code end up in production more times than I can count, from all over the web, so be forewarned stewards!

sergeykish 6y ago

CSS pollutes global without <style scoped> or shadow root. Even simpler variant: <form> <button onclick="form.counter.value -= 1;return false">-</button> <input name="counter" value="0"> <button onclick="form.counter.value = 1 + +form.counter.value;return false">+</button> </form> Custom elements is just a mutation observer with callbacks, can be used with DOM 0 as well: class MyCounter extends HTMLElement { connectedCallback() { this.attachShadow({mode: 'open'}).innerHTML = `<style>...</style><form>...</form>` } } customElements.define('my-counter', MyCounter)