https://github.com/knowler/design-mode-element
Work in progress. A custom element that switches on Design Mode and allows you to save the changes to your filesystem.
https://github.com/knowler/design-mode-element
custom-elements web-components
Last synced: about 2 months ago
JSON representation
Work in progress. A custom element that switches on Design Mode and allows you to save the changes to your filesystem.
- Host: GitHub
- URL: https://github.com/knowler/design-mode-element
- Owner: knowler
- Created: 2023-12-08T20:52:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-08T20:52:59.000Z (over 2 years ago)
- Last Synced: 2025-02-09T10:28:37.596Z (over 1 year ago)
- Topics: custom-elements, web-components
- Language: JavaScript
- Homepage: https://knowler.github.io/design-mode-element/demo
- Size: 1.95 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Design Mode Element
A custom element to switch [design mode](https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode) on and off. Also, allows you to save your changes. **Work in progress! API and functionality subject to change.** See the [demo](https://knowler.github.io/design-mode-element/demo).
## Defining
Define it the standard way or use the helper method:
```javascript
import { DesignModeElement } from "https://esm.sh/gh/knowler/design-mode-element/design-mode-element.js?raw";
DesignModeElement.define();
```
You can pass in your own tag name if you’d like.
## Usage
```html
```
Start with it on:
```html
```
## Customization
I’ll probably add some slots for providing your own elements in the future. For now the parts are exposed.
```css
design-mode::part(design-mode-toggle) {
font-family: Comic Sans MS;
}
design-mode::part(save-changes-button) {
color: DeepPink;
}
```