API / Props

Atributos HTML y propiedades JavaScript del componente.

Atributos HTML

Atributo Propiedad Tipo Default Descripción
max-comments maxcomments number 6 Cantidad de comentarios visibles antes del botón 'Ver más'.
placeholder placeholder string "Escribe un comentario..." Placeholder del textarea.
theme theme "dark" | "light" "dark" Tema del componente.
char-limit charlimit number 500 Máximo de caracteres por comentario.
— initialComments Comment[] [] Array de comentarios iniciales (solo vía JS, no como atributo HTML).

Propiedades JavaScript

Además de los atributos HTML, puedes asignar propiedades directamente desde JavaScript:

js
const el = document.querySelector("comment-section");

el.maxcomments = 9;
el.placeholder = "Tu opinión nos importa...";
el.theme = "light";
el.charlimit = 300;

initialComments

Para inicializar con comentarios existentes (útil para SSR o hydration):

js
el.initialComments = [
  {
    id: "1",
    text: "¡Excelente componente!",
    date: "2025-01-15T10:00:00Z",
    name: "Usuario Ejemplo",
    avatar: "https://i.pravatar.cc/80?u=1",
    emoji: "👍"
  }
];

Interfaz Comment

ts
interface Comment {
  id: string;
  text: string;
  date: string;
  name: string;
  avatar: string;
  emoji: string;
  liked?: boolean;
}

Eventos

El componente dispatchea eventos personalizados que puedes escuchar:

Evento Detalle Descripción
comment-added { comment: Comment } Se dispara cuando se agrega un comentario.
comment-deleted { commentId: string } Se dispara cuando se elimina un comentario.