by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    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?
    Tomasz Pluskiewicz
    @tpluscode
    netlify.com or surge.sh?
    Matt
    @systemsincode

    netlify.com or surge.sh?

    Thanks I'll take a look

    hxgdzyuyi
    @hxgdzyuyi
    webcomponents is dead ? will be replaced by es moudles?
    Carlo Branca
    @cbranca

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

    Thank you @angrycat9000 . In my project the web components are complex widgets, we need methods and injection of a shared service's instance. I think that the approach does not follow the standard but, as you say, it is acceptable.

    Tomasz Pluskiewicz
    @tpluscode
    @hxgdzyuyi no. totally different things
    Sebastian Báez
    @SebasBaezCode

    Hi everyone, have used a web component in multiple domains? counts them as duplicate content? It is for SEO topics Thanks!

    For example: <static-text-component><static-text-component/> Contains -> Hello, my name is Sebastian, and... (700 words more...)
    If I have it in http://mydomain1.com and http://mydomain2.com Does Google find it as duplicate content and penalize me?

    I use StencilJs
    Thanks!
    Mark Dane
    @angrycat9000
    Any examples of how to internationalize/localize strings in web components?
    Tomasz Pluskiewicz
    @tpluscode
    there is not thing specific in the web components spec
    what libraries are you using?
    matrixbot
    @matrixbot

    Resynth > <@gitter_damntrecky:matrix.org> Hi everyone! I'm a developer for a company called ZingSoft. We have a product called ZingGrid which is a commercial grid web component. The code is closed source (https://github.com/ZingGrid/zinggrid) but available for free use in commercial products. How does we fit into the web component community and if we belong on this platform?

    I'm not trying to be spam or promotion, we are deeply involved and invested in web components and am wondering your thoughts on:

    1. commercial web components being available on webcomponents.org
    2. commercial web components in general. Is there a place for them for you? What would you expect

    Oh god no

    Resynth Terrible idea
    Resynth Also that is a promotion, you could've asked the question without mentioning your product is free for enterprises...
    Resynth Imagine putting nonfree components on webcomponents.org
    3 replies
    Mark Dane
    @angrycat9000
    @tpluscode I am using LitElement
    Tomasz Pluskiewicz
    @tpluscode
    good. I recently needed i18n and for lit-html this worked nicely: https://github.com/andreasbm/lit-translate