36 lines
950 B
JavaScript
36 lines
950 B
JavaScript
class Note extends HTMLElement {
|
|
connectedCallback() {
|
|
// Get the note content
|
|
const content = this.innerHTML;
|
|
|
|
// Get optional type attribute for different note styles
|
|
const type = this.getAttribute('type') || 'default';
|
|
|
|
// Get optional title attribute
|
|
const title = this.getAttribute('title');
|
|
|
|
// Build the note HTML
|
|
let noteHTML = '<div class="note';
|
|
|
|
// Add type-specific class if provided
|
|
if (type !== 'default') {
|
|
noteHTML += ` note-${type}`;
|
|
}
|
|
|
|
noteHTML += '">';
|
|
|
|
// Add title if provided
|
|
if (title) {
|
|
noteHTML += `<h4 class="note-title">${title}</h4>`;
|
|
}
|
|
|
|
// Add the content
|
|
noteHTML += content;
|
|
noteHTML += '</div>';
|
|
|
|
this.innerHTML = noteHTML;
|
|
}
|
|
}
|
|
|
|
customElements.define('note-box', Note);
|