Skip to the demo zachleat Demo

<browser-window> Web Component

Fake a Safari-esque web browser window.

Used in demos as a way to fake a Safari-esque web browser window. Go back to the source code on GitHub.

This is a test. This one uses Windows-style buttons. This one has a big ’ol shadow.
This one has different shadow color.
This one has a themed color (light). This one has a themed color (dark). This one has a light themed color with a dark foreground (dark).
This content is flush to the window
This one has grayscale buttons. This one has a URL bar. Testing This one has an invalid URL but still renders. This one has a URL bar with Windows-style buttons. Default Avatar This one has a URL bar with a specified icon. This one has a URL bar with icon. This one only shows the hostname in the URL bar. This one shows http:// because eww, gross. This one has a really long URL bar with icon (but respects the boundaries of container or viewport). This one has a really long URL bar with icon (inline styled to max-width: 20em). This one forces light mode. This one forces dark mode.

This one inherits color-scheme from a parent data-theme attribute.

This one keeps a dark foreground on a light themed color in both modes.
This one scales with the parent font size (smaller). This one scales with the parent font size (larger).
This one is resizeable using <resize-asaurus>.

This one has an image screenshot.

resizeasaurus Web Component Demo screenshot

This one has an iframe.

This one has a background image on a parent.
This one tests border removal override (dark).
This one tests border removal.