webcomponents/community

webcomponents.org

sdyalor

@sdyalor

```

a

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

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

John Michael Swartz

@graphographer

@sdyalor event.target.innerHTML

otoh hand you also need to filter for just paper-item using this method

Aric Hasting

@AricHasting

Hey y'all! I'm a React dev (new to JS as a whole) trying to wrap my head around WC. Is there a best practice for state management in an app using wc and what's the best way for parents/children to communicate?

Dimitar Danailov

@dimitardanailov

@AricHasting

You have a react component / application and your goals is creating a WC wrapper ?

Aric Hasting

@AricHasting

No, just trying to learn outside the context of React. Like what do you do once you don't have that glue around the DOM/components

Put basically, what's the equivalent of state/props in wc, in terms of functionality

Dimitar Danailov

@dimitardanailov

Did you check: https://github.com/open-wc/open-wc ?

Aric Hasting

@AricHasting

Had not seen that, thanks!

John Michael Swartz

@graphographer

We use Backbone for state management and LitElement for components. Since LitEl uses observable attributes, it's not hard at all to write wrapper functions for gluing models and collections to web components.

Dimitar Danailov

@dimitardanailov

Eric Bidelman has a great intro article: https://developers.google.com/web/fundamentals/web-components/customelements

John Michael Swartz

@graphographer

essentially, when a model attribute changes, change a corresponding property on the element and the LitEl will re-render as necessary

Benny Powers

@bennypowers

@AricHasting it's your choice. If you like redux, or some other state container you should use it, or you can have an app shell that handles all the events and sets properties down the tree. I like using Apollo client state. There's haunted if you like hooks API.

Benny Powers

@bennypowers

I once wrote a chibi-storybook by setting up a Proxy to set props on elements whenever a prop was set on a big ol'e model object

sdyalor

@sdyalor

Here again

I have another question

I got to render

my dropdown :3, I'm using a map over an obj array, emulating a fetch data but everything synchronously

I have to render that dropdown with api data, How can i approach this with Lit-elemnt?

sdyalor

@sdyalor

I know that Lit Element look for changes in its properties then auto-rerender

Benny Powers

@bennypowers

@sdyalor can you share your code?

BALAJI

@balajiram

Hi @all,

I am trying to build web component drop-down, something like below

<simple-wc-dropdown visible-item-size=“3” >
<simple-wc-dropdown-item value=“1” label=“one”></simple-wc-dropdown-item>
<simple-wc-dropdown-item value=“2” label=“two” selected></simple-wc-dropdown-item>
<simple-wc-dropdown-item value=“3” label=“three”></simple-wc-dropdown-item>
</simple-wc-dropdown>

“<simple-wc-dropdown-item>” is slotted inside “<simple-wc-dropdown>”. based on the “visible-item-size” the “<simple-wc-dropdown>” needs to adjust the container height to display that many number of items in the option container.

*For achieving the above ““<simple-wc-dropdown>” needs to know about the height of “<simple-wc-dropdown-item>”, which is rendered via slots.

What is the suggested way to calculate the slotted element height, (I am using lit-element library to build my components)

Benny Powers

@bennypowers

ResizeObserver

BALAJI

@balajiram

Thanks @bennypowers

Will read about the resize observer

BALAJI

@balajiram

Hi @bennypowers , Resize observer helps when we wants the updated/modified elements height/width, after the window resize event has been occured. What I am actually looking for, is the proper way to calculate the slotted elements height & ResizeObserver is not 100% polyfillable

Benny Powers

@bennypowers

slotchange event

Safari has intersectionobserver now so ro is a more feasible option than before

BALAJI

@balajiram

Hi @bennypowers , In the slot change event triggers, If I check the height for slotted element(another web component - simple-wc-dropdown-item) it giving me 0.

Benny Powers

@bennypowers

Maybe it hasn't rendered yet. Really that's what ro is for

Guilherme da Costa Souza

@GCSBOSS_gitlab

Hey, fellows! Is there any consideration for GitLab support on webcomponents.com? All my main projects on npm are linked to GitLab.

Bogdan Petridean

@bpetridean

Hi guys,

I am trying to consume a web component: vaadin-upload v4.2.2 in scope of my app and it works just fine ...except on IE11 where it doe not
Now, I know that ie11 does not support ES6, so i guess this is the source of my issue, but do you have any ideas how I can generate or from where I can fetch the ES5 code for the above mentioned component?
I also tested with other components: paper-input and so on and the result is the same.

Thanks!

José Luis Aguilera

@JoseLuisA_gitlab

Hello all,
I'm learning about web components, and I'm trying to use @graviton/dropdown (https://www.webcomponents.org/element/@graviton/dropdown),

1) I executed "npm install @graviton/dropdown" and a folder "C:\xampp\htdocs\gravitron\node_modules" was created.
2) I created the following index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="module">
      import dropdown from '@graviton/dropdown/src/gvt-dropdown.js';
    </script>
    <title>Graviton Dropdown</title>
</head>
<body>
    <gvt-dropdown options='["Hello", "World", "Foo", "Bar", "Five", "Six"]'>Dropdown</gvt-dropdown>
</body>
</html>

but I get the folowing error in Chrome:
Uncaught TypeError: Failed to resolve module specifier "@graviton/dropdown/src/gvt-dropdown.js".
Relative references must start with either "/", "./", or "../".

Can you help me? thanks in advance.

Adam Bradley

@adamdbradley_twitter

Hello all! I'm looking to post all of Ionic's components to webcomponents.org! However, it says I need to use bower for that: https://www.webcomponents.org/publish-collection

Does anyone have any experience with this? Ionic is all under one repo, not an individual repo per component

sdyalor

@sdyalor

Hi Ever

sdyalor

@sdyalor

I need help
understanding this project
https://github.com/Polymer/pwa-starter-kit
how the npm run build:webpack
generate named chunks without configuration?

https://files.gitter.im/webpack/webpack/2vKM/Screen-Shot-2019-08-14-at-4.30.33-PM.png

Syed Rameez Aijaz

@RameezAijaz

Hello, I am new to webcomponents. I need to know about the browser compatibility of webcomponents. Please guide me. Thanks

codingmikesh

@codingmikesh

Does anyone have experience with Polymer 3 and the Here maps API 3.1 ?

Benny Powers

@bennypowers

Web components are supported on all major browsers, except edge. Edge support is coming very shortly

José Luis Aguilera

@JoseLuisA_gitlab

Hello @RameezAijaz, use for each specification caniuse, for example https://caniuse.com/#feat=template

https://caniuse.com/#search=custom%20element , https://caniuse.com/#search=shadow%20dom , etc

Syed Rameez Aijaz

@RameezAijaz

Thanks @bennypowers and @JoseLuisA_gitlab

Philip Durbin

@pdurbin

Hi! Is anyone here familiar with the code in https://github.com/webcomponents/webcomponents.org ? I have a question about persistence.

Syed Rameez Aijaz

@RameezAijaz

Hello guys, I have just published the cli on npm (https://www.npmjs.com/package/create-component-ui) to scaffold webcomponent based UI using typescript, lit-element and webpack. Give it a try and provide your feedback.
Thanks.

Where communities thrive

People

Repo info

Activity