webcomponents/webcomponentsjs

A suite of polyfills supporting the HTML Web Components specs

Avichay Eyal

@eavichay

slim.js is web components based, it's as fast as VDOM.

Avichay Eyal

@eavichay

If anyone is interested, I just had a talk at a meet up at Sisense (Tel-Aviv) about web components and WHY web components, here are the slides. https://docs.google.com/presentation/d/13PMwoT9OWgwugiQ5fxrA5Ht8t8jFmQCflV0DOnOjDso

DTteam

@DTteam

Hi,

I'm creating a Polymer 3 app, and I need to upload an Image with AJAX and grab request. I cannot make iron-form work for me. I've seen some interesting components but all require Bower and not NPM as specified by Polymer 3. Can anyone help me? What could I use? Can I use bower components too or do you know of any NPM components I may use? Many thanks indeed

Quang

@quangpro1610

Hi all,
I am a newbie.
How to use https://ga-dev-tools.appspot.com/polymer-elements/ ?
Please help me. Thank you very much.

Jay

@aelbore

Hi to all, we build a library to create web components heres a demo
https://next.plnkr.co/edit/CvFYOqAWzoTM6P4L

Hope your feedback thanks.

Binh Bui

@binhbbbb

@quangpro1610 What do you need help with?

Quang

@quangpro1610

@binhbbbb Thank you for response, I have completed my work with this tool.

KIP

@KipOmaha

Hi guys here is some updating I've done to x-tag v1 => https://github.com/KipOmaha/HTMLElements-XTag. I was just wondering if anyone is using this and was interested in updating it, because v2 is still beta. If your using it and was interested in an update pipe in on the issues in the repo.

ankitsinghal0880

@ankitsinghal0880

Hi Guys, need some input. Recently there is vulnerability reported with event-stream.js and Webcomponents-lite.js has a dependency on this library. What y'all expert think about it. I am not sure for what specific purpose is event-stream getting used and should we be concerned. We are using Polymer for building a highly secure financial application and any such vulnerability raises a huge concern. Your input is much appreciated

Andrew Robbins

@arobbins_gitlab

I'm not sure who to ask

but the demos on webomponents.org are not working

there is a warning

"Warning: You're viewing the Bower docs. This element has migrated to NPM."

how do I view the demos on npm?

Andrew Robbins

@arobbins_gitlab

n/m, I found the demos on npm, and it just redirects to webcomponents.org

abhikapuria

@abhikapuria

Hi all, I needed some guidance on how to fix the document.registerElement depreciation warning for Chrome M73 version. Right now I am using version 0.6.0-58c8709 of webcomponents.lite.js which is an old version.

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

@giorgilinda

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

@eavichay

jsdom/jsdom#1030

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

https://github.com/eavichay/showroom

Kartik Sharma

@Kartik1607

Can anyone confirms if youtube uses shadow dom or not?

its built on polymer, but could'nt find any shadow dom ref

Daan Haitsma

@daanhaitsma

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

@Kartik1607

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

@eavichay

There is no need for shadow dom in youtube. Therefor it is not used.

Andreas Hahn

@drdreo

Shadow Dom is never "needed". It's about using the platform and how to do it.

Guilherme Humberto

@GuilhermeHumberto

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

@eavichay

@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

@hari2m

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?

sdyalor

@sdyalor

https://www.webcomponents.org/element/@polymer/paper-dropdown-menu

Help my guys

I have this web component rendered with lit-html

    <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>

-- To do a search i need the selected value of this paper component, what is the best way to achieve this?

Tim Sweet

@timothyswt_twitter

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.

Suren2695

@Suren2695

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

@georges-gomes

Check out React and Preact templates on webcomponents.dev

Suren2695

@Suren2695

Thanks bro

Dzintars Klavins

@dzintars

https://chrome.google.com/webstore/detail/custom-elements-locator/eccplgjbdhhakefbjfibfhocbmjpkafc

Simple extension to see who uses custom elements

Harihara Krishnan

@veehhk

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!!

Georges Gomes

@georges-gomes

https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/

gsai0205

@gsai0205

Do we have any tool/framework to benchmark performance of web components?

onkar75

@onkar75

Does anybody know a simple admin dashboard built on web components, looking for some sample reference.

godIsAProgrammer

@godIsAProgrammer

how to make vue.js support v-model for webcomponent??

Where communities thrive

People

Repo info

Activity