Hi to all, we build a library to create web components heres a demo
https://next.plnkr.co/edit/CvFYOqAWzoTM6P4L
Hope your feedback thanks.
hi guys!
I'm a newbie regarding the webcomponents, but I would like to try them out and, to convince my co-workers and management to start using them, I'm preparing a small presentation which include a small demo on how to create a webcomponent.
I found I really nice example here: https://coryrylan.com/blog/introduction-to-web-components, but I would like to show a WebC is also easily testable and I'm currently blocked: we are using Jest, but I don't understand how I can use it to test a WebC: as soon as I run a simple test I got
`TypeError: Cannot read property 'define' of undefined
9 | }
10 |
> 11 | window.customElements.define("zp-counter", Counter);
| ^
12 |
at Object.define (src/js/counter.js:11:23)
at Object.<anonymous> (__tests__/counter.js:2:1)
`
Any idea what should I include to make Jest work?
["yt-activity-manager", "yt-guide-manager", "yt-gfeedback-manager", "yt-navigation-manager", "yt-network-manager", "yt-playlist-manager", "yt-player-manager", "yt-visibility-monitor", "ytd-page-manager", "ytd-playlist-sidebar-renderer", "ytd-settings-sidebar-renderer", "ytd-thumbnail-overlay-time-status-renderer", "ytd-player", "video", "ytd-guide-entry-renderer", "ytd-guide-collapsible-section-entry-renderer", "yt-page-navigation-progress"]
), but those indeed do not seem to use shadow dom
<paper-dropdown-menu label="Dinosaurs">
<paper-listbox slot="dropdown-content" >
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>