Giter VIP home page Giter VIP logo

webcomponents's Issues

NPM publish?

Hi there! Love the icon set, and am already using it in a project by hacking the SVGs directly into my code. I was starting to prep component versions of them when I saw this was already in progress. Is anything in particular preventing this from being published on NPM? Anything you need a hand with to push it over the finish line?

Invalid shadow DOM crashes chromedriver

Describe the bug

A <slot> element is not a valid child of a <svg> element, and crashes Chromedriver when asked for the text of the page.

Steps to Reproduce

Using capybara -> selenium-webdriver -> chromedriver...

<html>
  <body>
    <ph-trash><ph-trash>
    <div>foobar</div>
  </body>
</html>
visit 'index.html'
expect(page).to have_content 'foobar'

Expected behavior

does not crash. Capybara's have_content selector eventually ends up asking Selenium for the text content of the page.

Screenshots

     Failure/Error: expect(page).to have_content 'foobar'
     
     Selenium::WebDriver::Error::JavascriptError:
       javascript error: a.assignedNodes is not a function
         (Session info: chrome-headless-shell=126.0.6478.127)
     
     # 0   chromedriver                        0x00000001026eaa80 chromedriver + 4385408
     # 1   chromedriver                        0x00000001026e338c chromedriver + 4354956
     # 2   chromedriver                        0x0000000102300b0c chromedriver + 281356
     # 3   chromedriver                        0x0000000102304fd8 chromedriver + 298968
     # 4   chromedriver                        0x0000000102306e58 chromedriver + 306776
     # 5   chromedriver                        0x0000000102306ed0 chromedriver + 306896
     # 6   chromedriver                        0x000000010233e2a0 chromedriver + 533152
     # 7   chromedriver                        0x0000000102339734 chromedriver + 513844
     # 8   chromedriver                        0x000000010237bd24 chromedriver + 785700
     # 9   chromedriver                        0x0000000102337eec chromedriver + 507628
     # 10  chromedriver                        0x00000001023388c4 chromedriver + 510148
     # 11  chromedriver                        0x00000001026b243c chromedriver + 4154428
     # 12  chromedriver                        0x00000001026b6ea0 chromedriver + 4173472
     # 13  chromedriver                        0x0000000102697ff8 chromedriver + 4046840
     # 14  chromedriver                        0x00000001026b778c chromedriver + 4175756
     # 15  chromedriver                        0x000000010268afb8 chromedriver + 3993528
     # 16  chromedriver                        0x00000001026d521c chromedriver + 4297244
     # 17  chromedriver                        0x00000001026d5398 chromedriver + 4297624
     # 18  chromedriver                        0x00000001026e2f84 chromedriver + 4353924
     # 19  libsystem_pthread.dylib             0x0000000197c52f94 _pthread_start + 136
     # 20  libsystem_pthread.dylib             0x0000000197c4dd34 thread_start + 8
     # ./spec/system/[...]_spec.rb:56:in `block (3 levels) in <top (required)>'

Context (please complete the following information):

Additional notes:

  • confirmed by copying the shadow-dom of ph-trash into my own component (also using Lit). Crash continued. Removing the <slot> fixed the crash. Moving the <slot> outside of the <svg> element fixed the crash.
  • Near as I can tell, the assignedNodes is part of the HTMLSlotElement specification, so a <slot> in <svg> is recognized by one part of the browser but not up-fit to HTMLSlotElement, leading to the crash.

Tree Shaking

Hello! I was wondering if you had any thoughts on reducing bundle size when using this library. We're using a relatively small number (50~) of icons, so I'd like to leverage tree shaking to only include the icons we're using. As is, the icons load in noticeably after the rest of the page, causing a flicker when they render in. I think this could be fixed if we weren't making the browser download and parse JS for thousands of icons.

I would expect this to only load a single icon when used with, for example, Vite tree shaking:

import { PhArrowBendUpRight } from '@phosphor-icons/webcomponents'

But it looks like every icon gets bundled.

Curious if you have any thoughts, ideas, workarounds, etc. Thank you!

[A11y] Adding labels for screen readers

As mentioned in this issue, phosphor allows the user/dev to add arbitrary attributes such as aria-label to the icons. Unfortunately, I cannot find any documented option to do that with the web components library.

Would it be possible to add that feature or is it intended to restrict web components to not have that flexibility?

Expose Shadow DOM internals via `::part`

Since there is not part exposed, there is no way to inject styles into the shadow dom without resorting to javascript or use some kind of wrapper.
My use case was to set display:block on the svg element that was also wrapped with an anchor element, since it was messing the vertical alignment in a flex box container. Maybe I can just add another display:flex on the anchor wrapper and call it a day, but I think is pretty expected to expose a part api on a web component.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.