1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
content / test / data / accessibility / html / svg-style-element.html [blame]
<!--
@WAIT-FOR:Kettle
-->
<!DOCTYPE html>
<!-- saved from url=(0072)https://design-systems.pages.booking.com/dev-tools/component-viewer/#bui -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>
<div>
<button>
<span class="icon">
<svg class="" data-width="24" data-icon-name="kettle" viewBox="0 0 24 24" role="presentation">
<defs>
<style>.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style>
</defs>
</svg> <!-- svg -->
</span>
<span class="label"></span>
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
// Make sure that nothing inside of an SVG element is exposed.
const circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
document.querySelector('style').appendChild(circle);
const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", 'foreignObject');
document.querySelector('style').appendChild(foreignObject);
const input = document.createElementNS("http://www.w3.org/1999/xhtml", 'input');
foreignObject.appendChild(input);
document.querySelector('.label').innerText = 'Kettle';
}, 300);
});
</script>
</body>
</html>