4 ms·

On my side, the criticism I could make to web components is that there is no standard to serialize their shadow roots and, therefore, they are not deserializabl

by gildas 7y ago

On my side, the criticism I could make to web components is that there is no standard to serialize their shadow roots and, therefore, they are not deserializable without using JavaScript. I have been maintaining SingleFile [1], a web extension to save complete web pages, for 9 years and this is the first time I have had to include JavaScript code [2] to attach and display the shadow root of the web components (e.g. embed tweets) included in the saved page. [1] https://github.com/gildas-lormeau/SingleFile https://github.com/gildas-lormeau/SingleFile [2] https://github.com/gildas-lormeau/SingleFile/blob/93d1e7c000946800866730c5763e3d0af0a033ef/lib/single-file/single-file-core.js#L940 https://github.com/gildas-lormeau/SingleFile/blob/93d1e7c000...

dmix 7y ago
Thanks for your work on this and good job not having to inject JS for so long. I’m surprised there hasn’t been other nasty web stuff that required it.
- gildas 7y ago
  Thanks! You can find web components in a lot of unexpected places. For example, this page [1] contains more than 10K web components... The good news is that once the Pandora's box is open, I had the idea to code SingleFileZ [2] which also requires JavaScript to be enabled but frankly uses it! [1] https://bugs.chromium.org/p/chromium/issues/detail?id=4 https://bugs.chromium.org/p/chromium/issues/detail?id=4 [2] https://github.com/gildas-lormeau/SingleFileZ https://github.com/gildas-lormeau/SingleFileZ
  - dmix 7y ago
    It’s always interesting what we volunteer ourselves to become experts in through our work in software. I respect any OSS developer that dedicates themselves to this type of thing. I’m curious what google used to create that chromium bug report page (internal framework or a custom job). The internal tools targeting devs with good browsers will always have the most advanced stuff it seems.
    - gildas 7y ago
      Google uses LitElement (version 2.0.1) [1] to create the page. You can see it by typing `litElementVersions` in the JavaScript console. [1] https://github.com/Polymer/lit-element https://github.com/Polymer/lit-element
      - dmix 7y ago
        Right, of course it was their Polymer toolchain. Thanks
thunderbong 7y ago
This looks really interesting! Wasn't this the intention behind the older .mhtml format? I wonder what happened to that. Also, do you have an option to choose to not save javascript?
- gildas 7y ago
  You're right, MHTML is supposed to solve this problem. I wrote SingleFile because Chrome did not support MHTML 9 years ago. Now, it's not dead and Chrome supports it but no other modern browsers (not based on Chromium) supports it. That's why I continue to maintain SingleFile. The JavaScript injected by the extension will be included if and only if there are web components in the saved page. By default, all other scripts are removed.

by gildas 7y ago

dmix 7y ago

Thanks for your work on this and good job not having to inject JS for so long. I’m surprised there hasn’t been other nasty web stuff that required it.

gildas 7y ago
Thanks! You can find web components in a lot of unexpected places. For example, this page [1] contains more than 10K web components... The good news is that once the Pandora's box is open, I had the idea to code SingleFileZ [2] which also requires JavaScript to be enabled but frankly uses it! [1] https://bugs.chromium.org/p/chromium/issues/detail?id=4 https://bugs.chromium.org/p/chromium/issues/detail?id=4 [2] https://github.com/gildas-lormeau/SingleFileZ https://github.com/gildas-lormeau/SingleFileZ
- dmix 7y ago
  It’s always interesting what we volunteer ourselves to become experts in through our work in software. I respect any OSS developer that dedicates themselves to this type of thing. I’m curious what google used to create that chromium bug report page (internal framework or a custom job). The internal tools targeting devs with good browsers will always have the most advanced stuff it seems.
  - gildas 7y ago
    Google uses LitElement (version 2.0.1) [1] to create the page. You can see it by typing `litElementVersions` in the JavaScript console. [1] https://github.com/Polymer/lit-element https://github.com/Polymer/lit-element
    - dmix 7y ago
      Right, of course it was their Polymer toolchain. Thanks

thunderbong 7y ago

This looks really interesting! Wasn't this the intention behind the older .mhtml format? I wonder what happened to that. Also, do you have an option to choose to not save javascript?

gildas 7y ago
You're right, MHTML is supposed to solve this problem. I wrote SingleFile because Chrome did not support MHTML 9 years ago. Now, it's not dead and Chrome supports it but no other modern browsers (not based on Chromium) supports it. That's why I continue to maintain SingleFile. The JavaScript injected by the extension will be included if and only if there are web components in the saved page. By default, all other scripts are removed.