Doubts with web components project structure and imports

Question

I'm learning a little bit about web components and I have encountered a problem that I can solve but that I cannot understand.

First is the project structure for a project full made with web components. Most examples I have found are little components that can be reused everywhere (I guess that is one of the major points of web components), but nothing more. A major application has components but it has other things like services for example. I have mostly worked separating controllers and services and I don't know if this is correct for a web component or if it has all that logic inside only one file (let's call it "main.js" for instance);

The second doubt has to do with that separating of concerns that I've talking about. I am used to use imports and exports from es6, but i guess thats not valid for web components if I want to use totally native js. Otherwise I have to transpile to ES5. Is there any problem with that transpilation? Is it valid or is it against the standar?

Correct me with no mercy if I said something wrong :)

Thanks!

Answer 1

I don't know why I didn't think about it a month ago but I've been searching for real world applications with web components and actually there is a project that has examples of a lot of frameworks and technologies, including web components.

https://github.com/gothinkster/web-components-realworld-example-app

There we can see a proposal for a web component app. It is pretty much interesting to me, I guess use webpack imports isn't a bad thing after all :P

I hope this helps someone, sometime.