Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    Do I need to update the library to latest polyfills? Or the old version will still be fine to go with as I do see in FF and IE where document.registerElement is already depreciated polyfill replacing the functionality
    Linda Giorgi

    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?

    Avichay Eyal
    Correct me if I am wrong, last time I have checked JSDOM does not work with custom elements without polyfills. If you are running unit-tests for web components, you may want to check a dedicated universal tool: showroom.js
    Kartik Sharma
    Can anyone confirms if youtube uses shadow dom or not?
    its built on polymer, but could'nt find any shadow dom ref
    Daan Haitsma
    There are a bunch of custom elements (["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
    Kartik Sharma
    Wondering is slots can be used without shadow Dom. Also, it seems for internet explorer of YouTube website is rendered instead. Wondering if there are any limitations in polyfills.
    Avichay Eyal
    There is no need for shadow dom in youtube. Therefor it is not used.
    Andreas Hahn
    Shadow Dom is never "needed". It's about using the platform and how to do it.
    Guilherme Humberto
    Hello guys! I would like to make a floating chat component, similar to tawk.to. Do you know if there is a project?
    Avichay Eyal
    @drdreo it's needed of course, depends in the context. Polyner and Lit chose to use shadow dom always, which i think is not always the right case.
    Hari Krishna Gaddipati
    Hi Guys I am trying to use the cellClassNameGenerator property and assigned a function that returns a class name. But the class did not get applied.
    should I set the value of column or returning the class name si enough?
    Help my guys
    I have this web component rendered with lit-html
        <paper-dropdown-menu label="Dinosaurs">
          <paper-listbox slot="dropdown-content" >
    -- To do a search i need the selected value of this paper component, what is the best way to achieve this?
    Tim Sweet
    the paper-dropdown-menu needs to emit events for when the items are changed. if it isn't then you're going to have a harder time
    if it is, then you just need to add the event listener after it is rendered.
    Hey guys I need to create a web components using react and I need to use that Components in html or js file which is present in different folder
    Do we need any dependence packages
    Help me out guys
    Georges Gomes
    Check out React and Preact templates on webcomponents.dev
    Thanks bro
    Simple extension to see who uses custom elements
    Harihara Krishnan
    Hello 👋
    Just decided to create a web component for my project. I'm planning to make a excel like worksheet having drag and drop features.
    Are there anything already in place?
    Much appreciate your help!!
    Do we have any tool/framework to benchmark performance of web components?
    Does anybody know a simple admin dashboard built on web components, looking for some sample reference.