feat: support for custom and slot elements (#2581)

2023-08-10 21:13:10 +03:00 · 2021-07-14 17:59:08 +08:00
parent eeb5a3ea1d
commit acb4cd24b8
4 changed files with 174 additions and 13 deletions
--- a/tests/reftests/webcomponents/webcomponents.html
+++ b/tests/reftests/webcomponents/webcomponents.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Web components tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+
+    </style>
+</head>
+<body>
+<div>
+    <h1>Autonomous custom element</h1>
+    <autonomous-custom-element img="../../assets/image.jpg" text="This is text"></autonomous-custom-element>
+    <h1>Slot element</h1>
+    <summary-display>
+        <ul slot="master-list">
+            <li>Apples</li>
+            <li>Pears</li>
+            <li>Bananas</li>
+            <li>Oranges</li>
+            <li>Peaches</li>
+            <li>Strawberries</li>
+            <li>Blueberries</li>
+        </ul>
+
+        <p data-name="Apples">A common, sweet, crunchy fruit, usually green or yellow in color.</p>
+        <p data-name="Pears">A fairly common, sweet, usually green fruit, usually softer than Apples.</p>
+        <p data-name="Bananas">A long, curved, yellow fruit, with a fairly gentle flavor.</p>
+        <p data-name="Oranges">Orange in color, usually sweet but can be sharp, often contains pips.</p>
+        <p data-name="Peaches">An orange fruit with big stone in the middle, and sweet, juicy flesh.</p>
+        <p data-name="Strawberries">A red fruit with yellow seeds on the outside; has a sweet flavor and a pretty shape.</p>
+        <p data-name="Blueberries">They are berries and they are blue; sweet in flavor, small in size, round.</p>
+    </summary-display>
+
+    <template id="summary-display-template">
+        <article>
+            <div>
+                <slot name="master-list"></slot>
+            </div>
+            <div>
+                <slot name="choice"></slot>
+            </div>
+        </article>
+    </template>
+
+    <script src="autonomous-custom-element.js"></script>
+    <script src="slot-element.js"></script>
+</div>
+
+
+</body>
+</html>