ace-editor-webcomponent

v1.0.0

Published

2 months ago

Comprehensive learning path for Web Components, culminating in an Ace Editor web component

Downloads

0High
0Medium
0Low

stopsopa-owner

web-components custom-elements ace-editor learning tutorial

npm

https://www.npmjs.com/package/ace-editor-webcomponent

Documentation and Demo page

https://stopsopa.github.io/alert-webcomponent/

Alert Box Web Component

A lightweight, reusable alert/callout web component with GitHub-style alerts. Built with vanilla JavaScript and the Web Components API.

Features

✅ Pure Web Components API - no dependencies
✅ Shadow DOM for style encapsulation
✅ GitHub-style alert designs with Octicons
✅ Supports any HTML content via slots
✅ Reactive attribute updates
✅ Five alert types: note, tip, important, warning, caution
✅ Lightweight (~3KB uncompressed)

Installation

Download File

Download alert-box.js and include it in your HTML:


wget https://raw.githubusercontent.com/stopsopa/alert-webcomponent/refs/heads/main/alert-box.js

and then there two standard options to load:

1) Load directly into HTML

<script src="path/to/alert-box.js"></script>

2) ES Module

import './alert-box.js';

Usage

Basic Example

<!DOCTYPE html>
<html>
<head>
  <script src="alert-box.js"></script>
</head>
<body>
  <alert-box type="note">
    This is a note callout with important information.
  </alert-box>

  <alert-box type="warning">
    <strong>Warning:</strong> This action cannot be undone.
  </alert-box>
</body>
</html>

All Alert Types

<!-- Note (blue) - Informational content -->
<!-- not specifying type will make it "note" by default -->
<alert-box type="note">
  Highlights information that users should take into account, even when skimming.
</alert-box>

<!-- Tip (green) - Helpful suggestions -->
<alert-box type="tip">
  Optional information to help a user be more successful.
</alert-box>

<!-- Important (purple) - Crucial information -->
<alert-box type="important">
  Crucial information necessary for users to succeed.
</alert-box>

<!-- Warning (yellow) - Critical content -->
<alert-box type="warning">
  Critical content demanding immediate user attention due to potential risks.
</alert-box>

<!-- Caution (red) - Negative consequences -->
<alert-box type="caution">
  Negative potential consequences of an action.
</alert-box>

<!-- Custom Label Overrides -->
<alert-box type="warning" alert="Security Advisory">
  A custom label that precisely describes the nature of the alert.
</alert-box>

<alert-box type="note" alert="Documentation">
  Override the default label to suit your specific context.
</alert-box>

Rich HTML Content

The component accepts any HTML content via the default slot:

<alert-box type="warning">
  <strong>⚠️ Warning:</strong> Using both methods will cause issues:
  <ul>
    <li>Method A is preferred</li>
    <li>Method B has limitations</li>
    <li>Don't combine both approaches</li>
  </ul>
  <p>See the <a href="/docs">documentation</a> for details.</p>
</alert-box>

API Reference

Attributes

| Attribute | Type | Default | Description | |-----------|--------|---------|----------------------------------------------------------------| | type | string | note | Alert type: "note", "tip", "important", "warning", or "caution" | | alert | string | (type's default label) | Custom override for the default alert label |

Slots

| Slot | Description | |-----------|-------------------------------------------------| | (default) | Content to display in the alert box (accepts HTML) |

Alert Types

| Type | Color | Use Case | |-------------|--------|-------------------------------------------| | note | Blue | Neutral, informational content | | tip | Green | Helpful, optional information | | important | Purple | Crucial information | | warning | Yellow | Critical content with potential risks | | caution | Red | Negative consequences |

Dynamic Usage

Changing Alert Type

const alert = document.querySelector('alert-box');
alert.setAttribute('type', 'warning'); // Automatically re-renders

Creating Alerts Dynamically

const alert = document.createElement('alert-box');
alert.setAttribute('type', 'important');
alert.textContent = 'This is dynamically created!';
document.body.appendChild(alert);

Styling

The component uses Shadow DOM for style encapsulation. The default styles match GitHub's alert design.

Custom Spacing

You can control the spacing around alerts using standard CSS on the host element:

alert-box {
  margin: 20px 0;
}

Theming

The component's colors are hard-coded to match GitHub's design. If you need custom colors, you can modify the getConfig() method in alert-box.js.

Browser Compatibility

Chrome/Edge: 53+
Firefox: 63+
Safari: 10.1+
Opera: 40+

The component uses:

Custom Elements v1
Shadow DOM v1
ES6 Classes

Examples

Check out index.html for a complete demo with all alert types and examples.

Technical Details

Architecture

Custom Element: Extends HTMLElement using the Custom Elements API
Shadow DOM: Encapsulates styles and markup
Observed Attributes: Reacts to type attribute changes
Slots: Default slot for flexible content projection

Component Lifecycle

Constructor: Attaches shadow root
connectedCallback: Renders initial content when inserted into DOM
attributeChangedCallback: Re-renders when type attribute changes

Shadow DOM Structure

#shadow-root
  └── style (component styles)
  └── .alert-box (container)
      ├── svg.icon (GitHub Octicon)
      ├── .label (Alert type label)
      └── .content (slot for user content)

License

MIT License - Feel free to use in your projects!

Dev notes

Making web componet React ready: https://github.com/stopsopa/alert-webcomponent/commit/619b2dd588365bc67d6c353a4473568e56ab8b99