by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    danielebarell
    @danielebarell
    Maybe have an affiliation.
    danielebarell
    @danielebarell
    I'm a beginner as organizer and as a webcomponents' developer.
    So, any tip you will share are welcome.
    Thanks, dan
    Gino Bernardi
    @zorostang
    @danielebarell I am working on a web component project that aims to help beginners like yourself. would love to get your early feedback
    danielebarell
    @danielebarell
    @zorostang Ciao Gino! Sorry for the feedback delay. Of course I'm interested. Let's get in touch :)
    Maxim Kopylov
    @fureinzz
    hello all
    Philip Durbin
    @pdurbin
    hi
    Maxim Kopylov
    @fureinzz
    I recently published my component, but after I made edits to my project on github the element is not updated. How do I solve this problem?
    Chris Odom
    @chrisodom
    I am currently testing a basic HTMLElement based web component in IE 11. I am using the webomponents-sd-ce-pf.js and custom-elements-e5-adapter.js. When debugging my web component I noticed that the first instance on the page is stuck in an infinite loop, in the constructor. I am using babel as the transpiler with presets for cjs 3 for the module that is being created. Can anyone think of why my constructor is called thousands of times to the point that the Browser crashes?
    Géraud Henrion
    @fuunnx
    Do you render your component inside of itself ? it might cause that
    Chris Odom
    @chrisodom
    constructor() {
    super();
        const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.adoptedStyleSheets = [cssStyleSheet];
        shadowRoot.innerHTML = document.createElement("button").outerHTML;
    
        this.variant = {};
        this.setTabIndex = null;
    }
    Everything else is just applying classes to the button.
    Chris Odom
    @chrisodom
    Actually I commit out this line and it doesnt crash:
    shadowRoot.innerHTML = document.createElement("button").outerHTML;
    Does the polyfilled shayCSS actual handle innerHTML or is there and IE specific way of populating the shadowRoot
    Chris Odom
    @chrisodom
    So what I found is that you can not use innerHTML on the shadyCSS Shadow DOM but you can use appendChild. This change is now working, thanks.
    Chris Odom
    @chrisodom
    BTW: I was mistaken this is part of the ShadyDOM shim not ShadyCSS shim. thanks for listening.
    Chris Odom
    @chrisodom
    If I am using the webcomponents polyfills do these support the usage of slots with IE 11. The reason I ask is that it does not seem to work at all.
    Miguel Angel Alvarez Sánchez
    @midesweb
    Hi everyone! how can i use touch events on LitElement components? Polymer we had a mixin to implement touch events. Is a good idea to implement it on LitElement? any other better way? Thanks!
    Chris Odom
    @chrisodom
    Can you not just add the event listeners to the Custom Element? When it comes to touch actions they are differences between browsers. I am using pure Autonomous Custom Elements and created a toggle button the uses touch actions for Mobile and Touch screen implementations.
    Alex Shevchenko
    @alex-shevchenko
    Hi! How do you set an initial style for a webcomponent, which is used before the component is upgraded (or even before it's main source file is loaded)? The best idea I got to is to have <style> element with id and a small piece of CSS in head and then remove this style block by its ID immediately after the component is registered. Are there better ways? At least, there is no guarantee that webcomponents will be upgraded immediately after registration, so "jumping" still can occur.
    Géraud Henrion
    @fuunnx
    Hi Alex, yes something like that
    You can add a "mounted" attribute to your component when it's upgraded, and on the global stylesheet style unmounted components like that :
    my-component:not([mounted]) {
      // some style
    }
    Good luck
    Alex Shevchenko
    @alex-shevchenko
    makes sense. thank you
    dekel
    @dekel
    I'm implementing my own Combo Box Web Component using vanilla JS to that shows images and some extra information and I'm trying to copy the exact behaviour as a normal select. The problem comes when dealing with all the focus and blur events. When pressing tab it should focus on the next element (the combobox), pressing space or click should expand. Selecting an item should close the popup and keep the focus on the actual element. All that is very complicated.
    I couldn't see any decent example of a combobox that behaves exactly as a select element. Any ideas? Cheers.
    Alex Shevchenko
    @alex-shevchenko
    @fuunnx just found that there is a :defined pseudo-class, which seems a better alternative to custom attribute. what do you think?
    Alex Shevchenko
    @alex-shevchenko
    but if the user wants to define some default style (e.g. component-name { ... }), the definition with "not" will be more specific causing the user to write more complex selectors
    Alex Shevchenko
    @alex-shevchenko
    i ended up with removing initial style by id, but doing this via whenDefined
    still no guarantee that it will be executed after all elements are upgraded though
    Géraud Henrion
    @fuunnx
    didn't know of that selector, great 👍
    Chris Odom
    @chrisodom
    Has anyone been able to get slot and named slot working in IE11 via the webcomponents shadyDOM polyfill?
    Michael Orishich
    @mishaor

    Hi! For some reason I can't access any attributes in my component's constructor. I'm running Firefox 76.0. Here is my component code:

    class DateRepr extends HTMLElement {
        constructor() {
            super();
    
            // create shadow the hedgehog
            const shadow = this.attachShadow({ mode: 'open' });
    
            // create a span
            this.dateReprSpan = document.createElement('span');
    
            // get the attributes
            const rawReprFunction = this.getAttribute('data-repr-function');
            this.reprFunction = new Function('date', rawReprFunction); // I know it's dangerous but it's local
    
            console.log(rawReprFunction); // logs null

    Here's how I define the component in HTML: <date-repr data-repr-function="return 'a'"></date-repr>
    Can somebody tell me what's wrong? Thanks in advance.

    Michael Orishich
    @mishaor
    I've figured it out. Putting defer into the <script> tag with the script that registers the component fixed it.
    Chris Odom
    @chrisodom
    That is strange as I use sync on my component script and I can gain access my attributes. Have you tried using the dataset[s]. I can access my dataset[s] using either this.dataset.reprFunction or this.dataset["reprFunction"] to gain access?
    Also for updating the value do that in the connectedCallback function so this.dataset.reprFunction = new Function("date", rawReprFunction);
    Michael Orishich
    @mishaor
    Yes, I did try to use this.dataset. It didn't work, outputting no data attribute values. I've made the component according to Mozilla's popup info component tutorial: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
    In the source code they source the JavaScript file with the defer attribute and it works
    also, the <script> tag looked like this:
    <script src="components/date-repr.js"></script>
    Alex Shevchenko
    @alex-shevchenko
    @mishaor @chrisodom you should not read/write attributes in the constructor, use connectedCallback instead. please check the spec for the other things you should not do: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance.
    Chris Baclig
    @cbaclig
    I'm new to webcomponents, so please bear with me: I have a webcomponent library that I don't have control over that uses the v0 registerElement() APIs. I plan on using the Custom Elememts (v1) Polyfill for browsers that need it, but are there any adapters available that would make webcomponents defined in the v0 syntax using registerElement() just work?
    Carlo Branca
    @cbranca
    Hi all, I have two questions: is it considered a bad practice to expose public methods from a web component? the web components interface should be only attributes/properties and events?
    Mark Dane
    @angrycat9000
    @cbranca I would say it depends on the context and how you expect it the component to be used. Anything that is JS only will limit you from using it whrn writing HTML. In my experience most web components are part of a larger JS applicatiin so having methods is acceptable.
    Harshal.s
    @harshalsharma27
    can someone help me with one use case were i have created 5 web component and use them in different application.
    The problem is I want to create the bundle for each of these component rather the single bundle.
    mazika90
    @mazika90
    Hi
    nithin159
    @nithin159
    Hi All

    <template id="template">
    <style>
    ...
    </style>
    <div>
    <h1>Web Components</h1>
    <img src="http://webcomponents.org/img/logo.svg">
    </div>
    </template>

    <script>
    var template = document.querySelector('#template');
    var clone = document.importNode(template.content, true);
    var host = document.querySelector('#host');
    host.appendChild(clone);
    </script>

    <div id="host"></div>

    Can anybody help me to load the template in js. I dont have a html file in my application
    I am developing a app using web components
    Matt
    @systemsincode
    Anyone know of free hosting that supports webcomponents ie. lit-html and three.js out of the box or with npm or some pakage manager to install dependencies?