This is the fifth in a series of posts about creating a web component library using Stencil.js - Check out the first post
At this point we've buil...
For further actions, you may consider blocking this person and/or reporting abuse
Hi John,
Do you have a link to the github repo? Cheers,
My goodness I meant to put that up ages ago! I guess life happened. Let me try to track it down, and I'll toss it up on GitHub for you to see! 👍
Okay @kusaljay it took me a bit but I finally got it put up! Check it out: Mountain UI
Thanks John, your prompt response is much appreciated :)
Not nearly as prompt as I would've liked but at least it's finally done! 😅
@johnbwoodruff Can you please shed some light on how we can use Stencil components (like the ones you've created here) in React projects created using CRA?
You can reuse web components from React components too, check this example: github.com/proyecto26/ion-phaser/b...
Great series. I wonder if you could help out continue working on your code. I tried to implement stitching the tabs and in the tabs.tsx file's render function I want to display the innerHTML of the tab tag. It displays text, but if I have something like
the other tag is not rendered. How can I get the inner contents of the in the and display it with proper rendering? I.e. I want to implement switching tabs and display all the content of the tab properly rendered. Thanks!
Thanks for the comment! Unfortunately at this time I'm not working on this content and don't have any plans to for the near future. That being said, if you're working with Stencil and have questions on how to do things, I HIGHLY recommend checking out the ionic-framework repository. They have a massive component library and it's all built with Stencil best practices. (they did create Stencil for their framework after all!) They've got their tabs component you can reference, and it'll be far better than what I could recommend. :)
Hey John,
Great article, Can you please share what are the usage of host, assetDir and assetDirs in component decorator
Sorry this is months late, life got crazy and now here we are haha. The
hostproperty is replaced with the<Host>virtual component. This allows you to specify attributes and classes on the host element itself rather than the containing elements. See the docs for details.As for
assetDirs, it allows you to specify directories from which assets your component uses such as images come from.