2 ms·
I've started using web components in my last project and it has been very helpful in compartmentalizing functionality and promoting resue. Things are a bit dif
by ww520 7y ago
I've started using web components in my last project and it has been very helpful in compartmentalizing functionality and promoting resue. Things are a bit different in my experience than what're described in the blog. Here're the points as seen differently.
1. Good point, though someone is going to write a server side renderer to pre-generate the custom tags into regular html tags.
2. A web component can import its own CSS file, no need to put styles in JS code or string.
<style>
@import "/css/shared-styles.css"
@import "/components/my-widget/my-widget.css"
</style>
5. Composing with sub-components works just fine with or without slotted content. What's wanted in item 5 was a special case for dynamically including content at runtime. That's best left to Javascript when triggered with property setting.
6. For properties and attributes, it's simplest to just reflect all property get/set calls to attributes, using attribute as the only storage. I have some helper function to do that.
attrAsProp(comp, attr, property)
Object.defineProperty(comp, property, {
get: function() { return comp.getAttribute(attr) },
set: function(v) { comp.setAttribute(attr, v) }
});
9. Global namespace is a problem but it also makes things simple to use. We don't want complicate stuff like xmlns.