51 lines
1.3 KiB
HTML
51 lines
1.3 KiB
HTML
|
|
||
|
<!DOCTYPE html>
|
||
|
<html>
|
||
|
<head>
|
||
|
<style>
|
||
|
app-content {
|
||
|
display: block;
|
||
|
width: 100px;
|
||
|
height: 100px;
|
||
|
background: green;
|
||
|
animation: animation 10s linear forwards;
|
||
|
}
|
||
|
@keyframes animation {
|
||
|
from {
|
||
|
transform: translateX(0px);
|
||
|
}
|
||
|
2% {
|
||
|
transform: translateX(100px);
|
||
|
}
|
||
|
to {
|
||
|
transform: translateX(100px);
|
||
|
}
|
||
|
}
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
<app-content id=target>old text</app-content>
|
||
|
|
||
|
<script>
|
||
|
if (window.testRunner)
|
||
|
testRunner.waitUntilDone();
|
||
|
|
||
|
customElements.define('app-content', class extends HTMLElement {
|
||
|
constructor() {
|
||
|
super();
|
||
|
|
||
|
const root = this.attachShadow({ mode: 'open' });
|
||
|
root.innerHTML = `<slot></slot>`;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
setTimeout(() => {
|
||
|
target.innerHTML = "new text"
|
||
|
}, 100);
|
||
|
|
||
|
if (window.testRunner)
|
||
|
setTimeout(() => testRunner.notifyDone(), 500);
|
||
|
</script>
|
||
|
</body>
|
||
|
</html>
|