Where communities thrive


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

    Hi, could you list Arc Engine on the webcomponents.org page here towards the bottom?
    https://www.webcomponents.org/introduction

    Arc:
    https://www.arc2d.com/

    chisholmd
    @chisholmd
    I want to migrate my team off of Angular and onto LitElement. Any advice?
    JomoPipi
    @JomoPipi
    @chisholmd curious, why? why is it good enough to be worth switching to?
    themiketee
    @themiketee_twitter
    Hello all.
    themiketee
    @themiketee_twitter
    I’m a little stumped on something, and I want to ask the community. I’m creating vanilla WC, and when using html inside a template literal<h1></h1> there is no syntax highlighting. Are there any recommendations? I did install one VS Code option, but it expects “html<h1></h1>” to be added in front, but that stops my component from loading. As far as I can tell, I’m stuck with the monotone colour when using a template literal?
    Timothy Foster
    @Auroratide
    Hello! I have been trying to publish a public web component I made to webcomponents.org, but upon submission to the form am redirected to an Error 404 page. I've tried waiting 30+ minutes and the page continues to show 404. In the text form I've put "@auroratide/img-popout", and then tried again with the npm link "https://www.npmjs.com/package/@auroratide/img-popout". Is there something else I ought to be doing?
    Rajasegar Chandran
    @rajasegar
    Hello all, I published a small library for composing style props for web components
    https://github.com/rajasegar/styled-web-components
    Appreciate any inputs/feedback
    Nashorn
    @Nashorn
    @themiketee_twitter thats correct. Try ArcEngine, allows seperation of html and css into its own files
    themiketee
    @themiketee_twitter
    Ok, I will check it out 🙌
    coderrmt
    @coderrmt
    Hi , I am exploring option for CMS .. if we go by standards ( web components & JSR-170 , 283 ) what is the key difference
    why should one choose ,web components over JSR-170 , 283
    Evan Plaice
    @evanplaice

    I ran into some issues while trying to republish the vanillawc component collection

    1. The publishing tool won't accept .github as a repo name, which is 100% valid for use as a root/profile repo of a GitHub org
    2. The publishing tool will only recognize 'master' as main branch of a repo (ie which is a bit of an anachronism now)

    Here's the repo I'm trying to publish:
    https://github.com/vanillawc/.github

    I followed the rest of the instructions to the letter (ie bower.json + dependencies list + 'element-collection' keyword)

    Bruce B. Anderson
    @bahrus
    Try just entering the npm name?
    ralyodio
    @ralyodio
    Hello
    ralyodio
    @ralyodio
    So o rally like how clean and simple this code is but I’m wondering why he created the template outside the class. Is there any reason not to do that?
    https://alligator.io/web-components/attributes-properties/
    Nashorn
    @Nashorn
    @ralyodio - Yes. That's also how the Arc Engine works. Clean code separation.
    ex:
    https://replit.com/@Nashorn1/Knob#index.html
    https://replit.com/@Nashorn1/HelloWorld#index.html
    Nashorn
    @Nashorn
    Explanation of the templates here:
    https://www.arc2d.com/resources/?path=docs/topics/DefineComponent
    ralyodio
    @ralyodio
    I’m just wondering because I have a render function I put the template it
    Salym Akhmedov
    @salymk
    I'm trying to load Angular elements into a KnockoutJS app, how do I that, is there a npm package for doing that?
    Nashorn
    @Nashorn
    Thats not very easy.
    Look at Arc2D.com allows u to progressively upgrade any existing stack
    Native web components, native js. No builds, webpacks, npms, none of that
    Just a script tag in head
    albert1355
    @albert1355
    Does anyone know: Surely the constant reparsing of the customElement's <style></style> blocks must have a massive negative performance impact right?
    Tomasz Pluskiewicz
    @tpluscode
    probably not as much, given the limited scope and size. also, you typically will not actually re-render the style elements all too often, right?
    however if you have multiple instances of an element, surely it's wasteful to parse same styles multiple times
    this is where constructable stylesheets come in
    albert1355
    @albert1355
    yes i know of the constructable stylesheets, it seems like it's basically an absolute requirement to use that polyfill/feature.
    I just wonder about the initial rendering as well, I mean a browser can't really know if the next custom element that I'm inserting via javascript will have the same <style></style> content or a different one
    Tomasz Pluskiewicz
    @tpluscode
    well, with constructable stylesheet there is no style tag
    but in practice, I don't think the impact is as great
    I have been injecting entire legacy bootstrap theme into elements to overcome shadow root boundaries where legacy rendering depend on global styles
    albert1355
    @albert1355
    the demo still uses huge <style> tags: https://construct-stylesheets.glitch.me/
    Tomasz Pluskiewicz
    @tpluscode
    indeed
    albert1355
    @albert1355
    ok I see now, that's just how it ends up being rendered. But it's constructed via javascript. Then again, that's how you do it in a normal customElement too. You insert the <style> element
    right? so that makes me think what the big difference would be
    Tomasz Pluskiewicz
    @tpluscode
    yea, no, there should be no style tag
    check https://lit.dev/playground/
    it is displayed differently in the inspector
    image.png
    albert1355
    @albert1355
    where do you see this "constructed stylesheet"? I dont see it anywhere in the DOM, is it actually completely hidden unless revealed by the Chrome browser somewhere in a settings tab?
    oh nvm sorry, I see it when clicking on the <p> tag
    Tomasz Pluskiewicz
    @tpluscode
    that's from the style inspector of a node inside the sample component
    right. ie. whatever is styled by the constructed sheet
    albert1355
    @albert1355
    ok yes thank you, that's very interesting. So the adoptedStylesheet approach does help by eliminating the <style>
    heyitsmyname
    @heyitsmyname:matrix.org
    [m]
    Hello, I started learning web components and I'm wondering. Can I integrate other libraries like Material UI, React Prime into web component? Can't find any example
    Tomasz Pluskiewicz
    @tpluscode
    material is implemented by https://github.com/material-components/material-web
    Arup Sarkar
    @aksaja_twitter
    Hello all, I am learning web components, created a PWA app, now incorporating tensorflow JS, the traditional model of html, css and js is working in this glitch https://glitch.com/edit/#!/quartz-obtainable-responsibility?path=index.html%3A1%3A0. I posted a query in stackoverflow where I got stuck here is the question, https://stackoverflow.com/questions/72190759/update-html-element-from-javascript-in-web-component. Appreciate any help, any pattern to reactively populate shadow DOM elements ? or access shadowDOM in JS and populate ?
    Claude Brisson
    @arkanovicz
    Hello there. Just to let you know that on https://www.webcomponents.org/introduction , the first two specification links, towards "custom elements specification" and "shadow DOM specification", seem to be dead.