Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    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
    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
    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
    hi
    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?
    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
    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.