by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    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
    sunilgidwani
    @sunilgidwani
    How it's different from React in term of Performance, coding ?
    Joe Pea
    @trusktr
    Hello!
    sunilgidwani
    @sunilgidwani
    hello Joe
    Joe Pea
    @trusktr
    I'd like to put http://lume.io elements on webcomponents, but it isn't ready yet. Got docs to write!
    Nick Ardecky
    @damntrecky

    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
    Vitaly Zdanevich
    @vitaly-zdanevich
    Hi, please check/update Wikipedia page, maybe add some screenshots.
    https://en.wikipedia.org/wiki/Web_Components
    plxmax
    @plxmax
    Hi. I am new to Web components. I want to use a search field and I found paper-search-panel. But I have no idea how to use it. Any ideas?
    Joe Pea
    @trusktr
    Do they have docs?
    @plxmax I just checked, and looks like they didn't document really how to actually import it. But I looked at the code, and they're relying on the old "HTML Imports" which has been removed from the web. So, you should not use that lib (or ask them to update it).
    I haven't tried it, but maybe vaadin elements has something you can use. They have a wide range of custom elements, and is actively maintained and documented, so you should be able to read the docs and figure out how to use the elements.