Conceptual Design - Solid better User Experience


If you want, you can test on this page which is full of lit-element webcomponents.
and in the webdev console, you can see all those shadowDOM

When you want to save it, you only got the html like

<!DOCTYPE html>
<!-- saved from url=(0046) -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="smag0">
  <meta name="generator" content="LitElement">
  <link rel="manifest" href="">
  <link href="./Agora_files/bootstrap.min.css" rel="stylesheet">
  <link href="./Agora_files/all.css" rel="stylesheet">
    <script src="./Agora_files/jquery.slim.min.js"></script>

    <meta name="theme-color" content="cyan">

          .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

          @media (min-width: 768px) {
            .bd-placeholder-img-lg {
              font-size: 3.5rem;
        <!-- Custom styles for this template -->
        <link href="./Agora_files/offcanvas.css" rel="stylesheet">

<body class="bg-light">
  <app-element name="App"></app-element>
  <script src="./Agora_files/solid-file-client.bundle.js"></script>
  <script src="./Agora_files/app-element.js"></script>
  <a href="" target="_blank">Hosted on a Pod</a>
  <a href="" target="_blank">Hosted on gh-pages</a>
  <a href="" target="_blank">Tuto</a>
  <a href="" target="_blank">Dev</a>

  <script src="./Agora_files/offcanvas.js"></script>
  <script src="./Agora_files/notif-test.js"></script>

and all magic is done in the <app-element name="App"></app-element> imported by <script src="./Agora_files/app-element.js"></script>
all the dom is managed by this JS file.

But the same problem is , I suppose to all app that use webpack as it compiles all js files. It’s not specific to webcomponents.

We can also use webcomponents without Webpack


That’s what I would have expected. So you can save it from there.

It applies to all web apps that dynamically create the DOM using javascript, with or without webpack. But I do not see a problem actually, since the whole DOM is accessible.


What I wanted to say is that without webpack, the js elements are human readable :wink:


I think the issue is for an end user wanting to save a copy of a web page to disc.

But best you check the issue raised by the complainant. It isn’t my issue - my point in sharing it was to raise awareness about Web Components rather than get into a discussion about any particular issue in this topic. I created for that.


I know the solid gods do not smile on my posting without producing code, but whatever.

Web components for solid seem like a slam dunk to me. So some glue that different components can use to work together to make apps seem necessary in order to help notoriously independent developers work on them each in their own way.

I want to write code to do it, but these days I’m just very slow and have missed a lot of things.

So far basically all I’ve got is an idea of ‘channels’. @pdecrat called them ‘spaces’:

These can be components themselves, and they are basically collections of one or more resources from one or more pods. They can be defined in a custom component with RDFa (I was trying to use json strings in attributes for that but I think RDFa is better).

Then these channels or spaces components can have id’s and other web components can work with or on or in them.


I like the idea of grouping the data in the dashboard.
If I could suggest- from the user perspective- I would like to see exactly which organisations/other users have access to each peace of my data (not a group of data). Hope this more detailed view could come in the next step.


There are many good design pattern examples from how this is also already being handled regarding GDPR and things like Facebooks new “Off-Facebook Activity” tool, along with any iOS or Android permissions interface, etc .