Can you customize Web Components without a framework!?

[@CristianKirk]

Thanks a lot. This series is being very useful and it's hard to believe there are no more channels teaching about web components..

[@gomakethings]

Thank you!

[@dirtdart81]

Really enjoying this series! I'm not new to programming, but new to web/js and it is an interesting time to be learning. As flavor of the week frameworks go in and out, this kind of 'back-to-basics' feels timely. Thanks for the videos!

[@gomakethings]

You're welcome! If you have any questions along the way, feel free to ask!

[@pl4gueis]

Great series. How would I go about writing tests for these web components?

[@gomakethings]

Same way you'd test any DOM manipulation component. Jest is well suited to it, I think.

[@ChrisWeber]

Where is the follow up to this video? You talked about decoupling the data storage. I would love to see your implementation.

[@gomakethings]

Haven't made it yet. I'm a bit behind. Sorry!

[@cmilne10]

great series. Informative and simple

[@gomakethings]

Cheers!

[@terhuneb]

Thank you for mentioning an ES Module implementation too.

[@gomakethings]

You're welcome!

[@sonnyl2915]

Luv it! Question: I've got troubled running into swapping elements issue. How do you have all the elements within the web-component readily in order for execution by the DOM? Sometimes in the console window said undefined or not found?

[@gomakethings]

I wrote a little bit about this a few weeks ago: gomakethings.com/the-different-ways-to-instantiate-a-web-component/ If you have a specific example in a code pen or GitHub repo you'd like me to look at, though, that works too!

[@damvaz]

Great content!!! Ideas for new contents? What about "making a new simple design system" (framework agnostic) using web componentes and css best practices?

[@gomakethings]

That's a great suggestion, thanks!

[@krshnam6170]

The use of ${pick} was a bit confusing. It looked like you were using template literals but you are not. You are using ordinary strings and ${pick} is simply a literal piece of string to be replaced.

[@gomakethings]

That's right. Because it's passed in as an attribute value, and attribute values are always plain strings. There's no safe way to convert them into a template literal, so we have to use a string.replace() instead. I used template literal conventions, though, for ease, and to avoid conflicts with some static site generators that use a handlebars-style convention: double curly brackets like this: {{ }}