1-template.html - exports a template2-global-custom-element.html - globally defines a custom element3-scoped-custom-element.html - exports a scoped (non-registered) custom element definition4-element-with-script.html - A declarative element enhanced with a script5-import-from-inline-script.html - Exporting and importing from inline scripts6-export-from-script.html - Exporting from an HTML module from a inline script inside it7-use-template.html - Uses the template in template.html
| import type {ReactiveController, ReactiveControllerHost} from 'lit'; | |
| /** | |
| * A reactive controller that updates a host when slotted content changes and | |
| * provides helper methods for checking and getting assigned slot content. | |
| */ | |
| export class SlotController implements ReactiveController { | |
| private _host: ReactiveControllerHost & Element; | |
| private _slotNames?: ReadonlyArray<string>; |
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src="shadow-root.js"></script> | |
| </head> | |
| <div> | |
| <div slot="main"> | |
| I'm some projected content. | |
| </div> | |
| <shadow-root> |
Outdated - current proposal is at https://github.com/justinfagnani/scoped-custom-elements
Scoped Custom Element definitions is an oft-requested feature of Web Components. The global registry is a possible source of name collisions that may arise from coincidence, or from an app trying to define multiple versions of the same element, or from more advanced scenarios like registering mocks during tests, or a component explicitly replacing an element definition for its scope.
Since the key DOM creation APIs are global, scoping definitions is tricky because we'd need a machanis to determind which scope to use. But if we offer scoped versions of these APIs the problem is tractable. This requires that DOM creation code is upgraded to use the new scoped APIs, something that hopefully could be done in template libraries and frameworks.
Domenic's blöcks proposal outlines a way to conveniently define functions that run in another worker/worklet as an inline, non-capturing scope, function body.
Blöcks as proposed have a few open questions and lack a few features that could generalize them to more use cases and with more practical ergonomics.
Last Updated: 2018-01-23
Status: Draft
| class ExampleElement extends ObservableLitElement { | |
| @property() | |
| src: string; | |
| @observe('src') | |
| protected async _onSrcChange() { | |
| // fetch the new URL... | |
| } | |
| } |
| import {ApolloClient, NormalizedCacheObject} from '@apollo/client/core'; | |
| /** | |
| * Fired when an Apollo controller is connected to the document tree via its | |
| * host. Listeners should supply an Apollo client by setting the `client` | |
| * property on the event. | |
| */ | |
| export class ApolloControllerConnectedEvent extends Event { | |
| static readonly eventName = 'apollo-controller-connected'; |
Modules may need to load non-JS resources that would clearly categorized as dependencies - the module is not truly ready until those resources are (example: templates for UI components). Loading APIs, like fetch() are asynchronous, and there is currently no way to make a module wait for asynchronous calls.
Top-level await, which would block execution within a module on a await expression, has been proposed as a way to solve this problem. It has a critical problem as highlighted here by Rich Harris.
This is a reproduction for https://bugs.chromium.org/p/chromium/issues/detail?id=1050221
To reproduce:
npm inpm startChrome will start, cycle through some async tasks, and print the duration to the document and the terminal running node. On my laptop it takes ~500ms.
Next, run npm start again, bug switch back to the terminal as soon as Chrome launches. There should be enough time to put Chrome in the background before the task completes. The tasks should either never start or never complete. If you put Chrome in the foreground, the tasks will finish quickly.