Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RRFC] Lazy loaded Lit elements #22

Open
1 task done
justinfagnani opened this issue Aug 16, 2023 · 2 comments
Open
1 task done

[RRFC] Lazy loaded Lit elements #22

justinfagnani opened this issue Aug 16, 2023 · 2 comments

Comments

@justinfagnani
Copy link
Contributor

  • I searched for an existing RRFC which might be relevant to my RRFC

Motivation

Some developers would like to create a loader for a set of components that will automatically load element definitions as they are used. This is useful when you have a very large component set hosted on a CDN, so there's no specific module graph to load individual elements from, and you don't want to require your HTML-authoring users to write a script tag for every element they use.

It's a feature of Stencil, and Shoelace has built their own loader system.

Example

<head>
  <script type="module" src="https://my-element-cdn.com/my-element-collection-loader.js"></script>
</head>
<body>
  <my-element-1></my-element-1>
  <my-element-3></my-element-3>
</body>

In the case my-element-1, and my-element-3 would be loaded, but not my-element-2.

How

The basic approach is to register a stub element that loads the real definition when the first instance is created. The stub should contain static metadata needed for the definition like observed attributes, form association, etc.

We made an experiment for this a while back: https://github.com/PolymerLabs/split-element

Another approach would be to use a mutation observer, but that would only work in one HTML tree scope at a time. It would be fine for the main document.

Current Behavior

We have no lazy loading solution

Desired Behavior

References
@basit-qayoom
Copy link

Image 30-08-23 at 4 00 PM
I was reading the stencil docs, script tag for distribution.. Can you tell me which file do i need to include in script tag

@yorrd
Copy link

yorrd commented Sep 5, 2023

I'm just here to say that I appreciate the direction this is indicating. We were thinking about building something like that ourselves, but an "official" solution would be much appreciated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@justinfagnani @yorrd @basit-qayoom