by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    chisholmd
    @chisholmd

    I also tried wrapping the property in a function call but that didn't work either

    <vaadin-progress-bar ?indeterminate="${this._showBar(this.displayProgressBar)}" value="0"></vaadin-progress-bar>

    anyone?
    chisholmd
    @chisholmd
    Nevermind...did it imperatively instead
    Tomasz Pluskiewicz
    @tpluscode
    are you writing TypeScript?
    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
    Tomasz Pluskiewicz
    @tpluscode
    I don't think you can create web components with react
    Suren2695
    @Suren2695
    It is possible buddy using parcel bundler concept ....
    I have done it .... But my only problem is when ever am using my created web component in html which is present in different folder structure ... I need to use only ---> parcel myhtml.html
    And it is running in port 1234
    I want it to run in localhost://5000
    LalitKushwah
    @LalitKushwah

    Hello All,
    I have developed a component which is simply a wrapper over input box say <my-input></my-input>
    Now when I am using this blur and focus event on my tag in angular like

    <my-input (blur)="method"></my-input>
    so my method is not getting called.
    I came to know that it requires capturing enabled which can be done by :

    myinput.addEventListener('blur', function () {}, true)

    but Is there any way to embed capturing in my-component itself so I can simply call these functions in my consumer application without doing any additional stuff.

    Géraud Henrion
    @fuunnx

    Maybe one of these works ?

    In your component connected callback :
    this.addEventListener('blur', (event) => this.dispatchEvent(event), true)
    or this.shadowRoot.addEventListener('blur', (event) => this.dispatchEvent(event), true)

    LalitKushwah
    @LalitKushwah
    @fuunnx
    I am getting Uncaught DOMException Failed to execute 'dispatchEvent on EventTarget'. The event is already being dispatched error
    Suren2695
    @Suren2695
    I have created a number counter page using React JS and converted it into Web Component by defining it as <my-counter /> (reusable component )
    Now If i import this tag into my HTML code it should display my counter page along with my HTML content
    but the condition is without using the folder structure of my JS file i need to call by my host in html code
    kindly help me out !
    Géraud Henrion
    @fuunnx

    @LalitKushwah this.dispatchEvent(new Event('focus')); ? But carefull about infinite loops then, my guess is that your handler will recatch the same event you just created

    Maybe :

    this.addEventListener(
      'blur', 
      (event) => {
        if(event.target !== this) { // or a similar check that works
          this.dispatchEvent(new Event('focus'))
        }
      },
      true
    )

    Seee MDN for creating and dispatching events : https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

    Géraud Henrion
    @fuunnx

    @Suren2695 What do you mean by importing this tag ? <script src="path/to/my-counter.js" /> or <script src="path/to/bundle.js" /> ? This should work. Do you have an error message ?

    Of course you should also precompile the imported javascript first, because JSX is not understood by browsers

    chisholmd
    @chisholmd

    Hi all, I am getting some very weird behavior and I can't find anything from searching. Hoping someone might have a clue that can get me going in the right direction. I am using hash navigation for my SPA. I never write to the history object, I update the url and then the app detects the change and does its navigation (without a router component). I have a table of contents type menu that loads articles each article is a unique hash. Ok...here is the weird part. If I click on link after another leaving about 4 seconds in between, the back button behavior is just what I would expect. If I click about 2 secs apart back behavior is fubar. IN BOTH CASES, complete history items are written to the browser. Click fast, or slow, the exact same items are in the history object.

    I think that chrome is detecting time on page and marking the history item as "suspicious" even if the content fully loaded. I have sort of confirmed this by testing this behavior on other sites.

    So my question is, does anyone know anything about this, can they point me to some reading? Or...is there a known "fix" to improve this behavior?
    Thanks

    chisholmd
    @chisholmd
    Aha! I solved it. I was assuming that since I could see the URLs in the history I didn't need to use pushState. But when I do a pushState prior to my next navigation, suddenly the back button works as expected. :)
    MichaelMyat
    @MichaelMyat
    Hey guys, where can I download polymer 2.x pre-built elements? Everything is now updated to polymer 3 and I need older version with.html
    malika020
    @malika020
    hello
    matrixbot
    @matrixbot
    prots posted an image: IMG_20200420_104211.jpg
    prots Don't know why this bar move oftentimes..
    prots And the website keep asking location permission. I click don't ask again but still showing.
    Eshwar kv
    @Eshwar4299
    Hello, i'm having this issue {"message": "No github URL associated with package", "code": 15}
    my package.json looks like "repository": {
    "type": "git",
    "url": "https://github.com/Eshwar4299/corona-lit.git"
    },
    please help
    matrixbot
    @matrixbot
    prots posted an image: IMG_20200423_044917.jpg
    prots Pixelfed.de
    danielebarell
    @danielebarell
    Hi! I'd like to organize and promote a web-components project involving Italian JavaScript devs.
    danielebarell
    @danielebarell
    I had a little walk over your webcomponents.org principles and I'd like to apply them on my Italian JS initiative.
    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!