Mutation Observer

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 wa-mutation event. When emitted, a collection of MutationRecord objects will be attached to event.detail that contains information about how it changed.

val variants  = List[ThemeVariant]("brand", "success", "neutral", "warning", "danger")
val clicksVar = Var(0)

div(
  MutationObserver(
    _.attr := "variant",
    _.onMutation.map { event =>
      println(event.detail)
    } --> Observer.empty
  )(
    Button(
      _.variant <-- clicksVar.signal.map(clicks => variants(clicks % variants.length))
    )(
      onClick --> Observer[dom.MouseEvent] { _ =>
        clicksVar.update(_ + 1)
      },
      "Click to mutate"
    )
  ),
  br(),
  "👆 Click the button and watch the console"
)

val variants  = List[ThemeVariant]("brand", "success", "neutral", "warning", "danger")val clicksVar = Var(0)div(  MutationObserver(    _.attr := "variant",    _.onMutation.map { event =>      println(event.detail)    } --> Observer.empty  )(    Button(      _.variant <-- clicksVar.signal.map(clicks => variants(clicks % variants.length))    )(      onClick --> Observer[dom.MouseEvent] { _ =>        clicksVar.update(_ + 1)      },      "Click to mutate"    )  ),  br(),  "👆 Click the button and watch the console")

When you create a mutation observer, you must indicate what changes it should respond to by including at least one of attr, child-list, or char-data. If you don't specify at least one of these attributes, no mutation events will be emitted.

Examples

Child List

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

val buttonCountVar = Var(0)

div(
  MutationObserver(
    _.childList := true,
    _.onMutation.map { event =>
      println(event.detail)
    } --> Observer.empty
  )(
    div(
      cls("flex flex-wrap gap-2"),
      Button(_.variant := "brand")(
        onClick --> Observer[dom.MouseEvent] { _ =>
          buttonCountVar.update(_ + 1)
        },
        "Add button"
      ),
      children <-- buttonCountVar.signal.map { count =>
        (1 to count).map { i =>
          Button()(
            onClick --> Observer[dom.MouseEvent] { event =>
              event.target.asInstanceOf[dom.Element].remove()
              event.stopPropagation()
            },
            i
          )
        }
      }
    )
  ),
  "👆 Add and remove buttons and watch the console"
)

val buttonCountVar = Var(0)div(  MutationObserver(    _.childList := true,    _.onMutation.map { event =>      println(event.detail)    } --> Observer.empty  )(    div(      cls("flex flex-wrap gap-2"),      Button(_.variant := "brand")(        onClick --> Observer[dom.MouseEvent] { _ =>          buttonCountVar.update(_ + 1)        },        "Add button"      ),      children <-- buttonCountVar.signal.map { count =>        (1 to count).map { i =>          Button()(            onClick --> Observer[dom.MouseEvent] { event =>              event.target.asInstanceOf[dom.Element].remove()              event.stopPropagation()            },            i          )        }      }    )  ),  "👆 Add and remove buttons and watch the console")

Examples

Child List

On this page