Mutation Observer

<pc-mutation-observer>

1.0.0-alpha.1

Experimentell

Die Mutation Observer‐Komponente bietet eine schlanke, deklarative Schnittstelle zur MutationObserver‐API.

Der Mutation Observer meldet Änderungen an den Inhalten, die er umschließt, über das pc-mutation‐Event. Wenn dieses ausgelöst wird, wird eine Sammlung von MutationRecord‐Objekten an event.detail angehängt, die Informationen darüber enthalten, wie sich der Inhalt verändert hat.

<div class="mutation-overview pc-stack">    <pc-mutation-observer attribute="appearance">        <pc-button appearance="primary">Klick zum Mutieren</pc-button>    </pc-mutation-observer>    ⬆️ Klick den Button und schau in die Konsole</div><script>    const container = document.querySelector(".mutation-overview");    const mutationObserver = container.querySelector("pc-mutation-observer");    const button = container.querySelector("pc-button");    const appearances = ["primary", "success", "neutral", "warning", "danger"];    let clicks = 0;    button.addEventListener("click", () => {        clicks++;        button.setAttribute(            "appearance",            appearances[clicks % appearances.length],        );    });    mutationObserver.addEventListener("pc-mutation", (event) => {        console.log(event.detail);    });</script><style>    .mutation-overview pc-button {        margin-block-end: var(--pc-spacing-l);    }</style>

Code

Edit

Demos

Kindelemente

Verwende das Attribut child-list, um auf neue Kindelemente zu achten, die hinzugefügt oder entfernt werden.

<div class="mutation-child-list">    <pc-mutation-observer child-list>        <div class="buttons">            <pc-button appearance="primary">Button hinzufügen</pc-button>        </div>    </pc-mutation-observer>    ⬆️ Buttons hinzufügen oder entfernen und in die Konsole schauen</div><script>    const container = document.querySelector(".mutation-child-list");    const mutationObserver = container.querySelector("pc-mutation-observer");    const buttons = container.querySelector(".buttons");    const addButton = container.querySelector('pc-button[appearance="primary"]');    let index = 0;    addButton.addEventListener("click", () => {        const button = document.createElement("pc-button");        button.textContent = index++;        buttons.append(button);    });    buttons.addEventListener("click", (event) => {        event.stopPropagation();        const target = event.target.closest('pc-button:not([appearance="primary"])');        if (target) {            target.remove();        }    })</script><style>    .mutation-child-list .buttons {        display: flex;        margin-block-end: var(--pc-spacing-l);        gap: var(--pc-spacing-xs);        flex-wrap: wrap;    }</style>

Code

Edit

Eigenschaften

Name	Beschreibung	Standard
`attribute`	Watches for changes to attributes. To watch only specific attributes, separate them with a space (e.g., `attribute="class id title"`). To watch all attributes, use the `` wildcard. Typ: `string \| undefined`*	‐
`attributeOldValue` `attribute-old-value`	Indicates whether or not the attribute’s previous value should be recorded when monitoring changes. Typ: `boolean`	`false`
`characterData` `character-data`	Watches for changes to the character data contained within the node. Typ: `boolean`	`false`
`characterDataOldValue` `character-data-old-value`	Indicates whether or not the previous value of the node’s text should be recorded. Typ: `boolean`	`false`
`childList` `child-list`	Watches for the addition or removal of new child nodes. Typ: `boolean`	`false`
`disabled`	Disables the mutation observer. Typ: `boolean`	`false`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Slots

Name	Beschreibung
(Standard)	The content to watch for mutations.

Erfahre mehr über die Benutzung von Slots.

Events

Name	Beschreibung	Event‐Detail
`pc-mutation`	Emitted when a mutation occurs.	`{ mutationList: MutationRecord[] }`

Erfahre mehr über Events.

Importieren

Wenn du den Auto‐Loader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du dich für „Cherry‐Picking“ entschieden hast, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/components/mutation-observer/mutation-observer.js"></script>

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/components/mutation-observer/mutation-observer.js";

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

import "placer-toolkit/dist/components/mutation-observer/mutation-observer.js";