Observadores
.Observador de mutaciones
El observador de mutaciones informará de los cambios al contenido que envuelve a través del evento gstock-mutation-event.
Cuando se emite, se adjuntará una colección de objetos MutationRecord a event.detail que contiene información sobre la mutación.
Haz clic en el botón y mira la consola
<gstock-mutation-observer attr="color">
<gstock-button>Brand</gstock-button>
</gstock-mutation-observer>
<br>
Haz clic en el botón y mira la consola
<script type="module">
const mutationObserver = document.querySelector('gstock-mutation-observer');
const button = document.querySelector('gstock-button');
const colors = ['brand', 'neutral', 'information', 'success', 'warning', 'danger'];
let clicks = 0;
// Change the button's color attribute
button.addEventListener('click', () => {
clicks++;
const color = colors[clicks % colors.length];
const colorWithCapital = color.charAt(0).toUpperCase() + color.slice(1);
button.setAttribute('color', color);
button.textContent = colorWithCapital;
});
// Log mutations
mutationObserver.addEventListener('gstock-mutation-event', event => {
console.log(event.detail);
});
</script>
<style>
gstock-button {
margin-bottom: 1rem;
}
</style>Cuando se crea un observador de mutaciones, se debe indicar a qué cambios debe responder incluyendo al menos uno de los atributos attr, child-list o char-data. Si no especifica al menos uno de estos atributos, no se emitirá ningún evento de mutación.
Lista de elementos secundarios
Utilice el atributo child-list para detectar nuevos elementos secundarios que se agregan o eliminan.
<gstock-mutation-observer child-list>
<div class="buttons">
<gstock-button>Add button</gstock-button>
</div>
</gstock-mutation-observer>
Agrega y quita botones y observa la consola
<script type="module">
const mutationObserver = document.querySelector('gstock-mutation-observer');
const buttons = document.querySelector('.buttons');
const button = document.querySelector('gstock-button');
let i = 0;
// Add a button
button.addEventListener('click', () => {
const button = document.createElement('gstock-button');
button.textContent = ++i;
button.color = 'neutral';
buttons.append(button);
});
// Remove a button
buttons.addEventListener('click', event => {
const target = event.target.closest('gstock-button[color="neutral"]');
event.stopPropagation();
if (target) {
target.remove();
}
});
// Log mutations
mutationObserver.addEventListener('gstock-mutation-event', event => {
console.log(event.detail);
});
</script>
<style>
.buttons {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
</style>