Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@lit-labs/ssr-dom-shim
Advanced tools
The @lit-labs/ssr-dom-shim package is designed to provide a server-side DOM shim for use with Lit components, enabling server-side rendering (SSR) of components that normally rely on browser-specific DOM APIs. This package helps in rendering web components on the server, making it easier to build isomorphic applications.
DOM Shim for Server-Side Rendering
This feature allows the rendering of Lit HTML templates on the server, using a DOM shim to emulate a browser-like environment. The code sample demonstrates how to render a simple Lit HTML template to a stream, which can then be sent as a response in a server environment.
import { ssr } from '@lit-labs/ssr';
import { html } from 'lit';
import { renderToStream } from '@lit-labs/ssr/lib/render-to-stream.js';
const template = html`<div>Hello, SSR!</div>`;
const resultStream = renderToStream(template);
resultStream.pipe(process.stdout);
Domino is a server-side DOM implementation based on Mozilla's dom.js, allowing Node.js applications to implement parts of the web platform DOM. This is similar to @lit-labs/ssr-dom-shim in that it provides DOM APIs on the server, but it is more general-purpose and not specifically tailored for Lit components.
jsdom is another popular server-side DOM implementation that simulates a web browser's environment. Like @lit-labs/ssr-dom-shim, jsdom allows the manipulation of the structure and contents of web pages using standard DOM API. However, jsdom is more comprehensive and includes support for a wider range of web standards, making it suitable for testing and scraping applications beyond just rendering components.
This package provides minimal implementations of Element
, HTMLElement
,
CustomElementRegistry
, and customElements
, designed to be used when Server
Side Rendering (SSR) web components from Node, including Lit components.
Lit itself automatically imports these shims when running in Node, so Lit users should typically not need to directly depend on or import from this package.
See the lit.dev SSR docs for general information about server-side rendering with Lit.
Other libraries or frameworks who wish to support SSR are welcome to also depend
on these shims. (This package is planned to eventually move to
@webcomponents/ssr-dom-shim
to better reflect this use case). There are two
main patterns for providing access to these shims to users:
Assigning shims to globalThis
, ensuring that assignment occurs before
user-code runs.
Importing shims directly from the module that provides your base class, using
the node
export
condition to
ensure this only happens when running in Node, and not in the browser.
Lit takes approach #2 for all of the shims except for customElements
, so that
users who have imported lit
are able to call customElements.define
in their
components from Node.
The main module exports the following values. Note that no globals are set by this module.
Element
HTMLElement
CustomElementRegistry
customElements
Please see CONTRIBUTING.md.
FAQs
DOM shim for Lit Server Side Rendering (SSR)
The npm package @lit-labs/ssr-dom-shim receives a total of 1,225,908 weekly downloads. As such, @lit-labs/ssr-dom-shim popularity was classified as popular.
We found that @lit-labs/ssr-dom-shim demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.