Mutation Observer

<pc-mutation-observer>

1.0.0-alpha.1

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

The Mutation Observer component offers a thin, declarative interface to the MutationObserver API.

The mutation observer will report changes to the content it wraps through the pc-mutation event. When emitted, a collection of MutationRecord objects will be attached to event.detail that contains information about how it changed.

<div class="mutation-overview">
    <pc-mutation-observer attribute="appearance">
        <pc-button appearance="primary">Click to mutate</pc-button>
    </pc-mutation-observer>
    <br />
    ⬆️ Click the button and watch the console
</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#

Child list#

Use the child-list attribute to watch for new child elements that are added or removed.

<div class="mutation-child-list">
    <pc-mutation-observer child-list>
        <div class="buttons">
            <pc-button appearance="primary">Add button</pc-button>
        </div>
    </pc-mutation-observer>
    ⬆️ Add and remove buttons and watch the console
</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;
        gap: var(--pc-spacing-xs);
        flex-wrap: wrap;
        margin-block-end: var(--pc-spacing-l);
    }
</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
(default)	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 Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, 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, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

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

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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