Mutation Observer

<pc-mutation-observer>

1.0.0-alpha.1

experimental

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

Properties

Name	Description	Default
`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. Type: `string \| undefined`*	‐
`attributeOldValue` `attribute-old-value`	Indicates whether or not the attribute’s previous value should be recorded when monitoring changes. Type: `boolean`	`false`
`characterData` `character-data`	Watches for changes to the character data contained within the node. Type: `boolean`	`false`
`characterDataOldValue` `character-data-old-value`	Indicates whether or not the previous value of the node’s text should be recorded. Type: `boolean`	`false`
`childList` `child-list`	Watches for the addition or removal of new child nodes. Type: `boolean`	`false`
`disabled`	Disables the mutation observer. Type: `boolean`	`false`
`updateComplete`	A read‐only promise that resolves when the component has finished updating.	‐

Learn more about customising animations.

Slots

Name	Description
(default)	The content to watch for mutations.

Learn more about using slots.

Events

Name	Description	Event detail
`pc-mutation`	Emitted when a mutation occurs.	`{ mutationList: MutationRecord[] }`

Learn more about events.

Importing

If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

CDN (script tag)

CDN (import)

npm (import)

To manually import this component from the CDN, copy this code snippet and paste it in your HTML.

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

To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.

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

To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.

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