mount-observer-script-element 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.hintrc +15 -0
- package/.kiro/steering/tech.md +251 -0
- package/.vscode/settings.json +2 -0
- package/LICENSE +21 -0
- package/MOSE.js +189 -0
- package/MOSE.ts +228 -0
- package/README.md +303 -0
- package/demo/scopedCustomElementRegistry.html +23 -0
- package/getHighestCERNode.js +37 -0
- package/getHighestCERNode.ts +41 -0
- package/imports.html +9 -0
- package/index.js +2 -0
- package/index.ts +2 -0
- package/package.json +50 -0
- package/requirements/Requirement1.md +14 -0
- package/requirements/Requirement2.md +7 -0
- package/requirements/Requirement3.md +15 -0
- package/requirements/Requirement4.md +9 -0
- package/requirements/Requirement5.md +16 -0
- package/requirements/Requirement6.md +23 -0
- package/requirements/Requirement7.md +3 -0
- package/tests/MOSE.html +173 -0
- package/tests/Requirement3.html +239 -0
- package/tests/buttonMatch.json +12 -0
- package/tests/exclude.html +33 -0
- package/tests/getHighestCERNode.html +119 -0
- package/tests/inheritance.html +33 -0
- package/tests/simple.html +25 -0
- package/tsconfig.json +20 -0
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Test getHighestCERNode</title>
|
|
7
|
+
<!-- #include virtual="/imports.html" -->
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
font-family: Arial, sans-serif;
|
|
11
|
+
padding: 20px;
|
|
12
|
+
}
|
|
13
|
+
.test-result {
|
|
14
|
+
margin: 10px 0;
|
|
15
|
+
padding: 10px;
|
|
16
|
+
border-radius: 4px;
|
|
17
|
+
}
|
|
18
|
+
.pass {
|
|
19
|
+
background-color: #d4edda;
|
|
20
|
+
color: #155724;
|
|
21
|
+
}
|
|
22
|
+
.fail {
|
|
23
|
+
background-color: #f8d7da;
|
|
24
|
+
color: #721c24;
|
|
25
|
+
}
|
|
26
|
+
#test-container {
|
|
27
|
+
margin-top: 20px;
|
|
28
|
+
}
|
|
29
|
+
</style>
|
|
30
|
+
</head>
|
|
31
|
+
<body>
|
|
32
|
+
<h1>getHighestCERNode Tests</h1>
|
|
33
|
+
<div id="results"></div>
|
|
34
|
+
<div id="test-container">
|
|
35
|
+
<my-element>
|
|
36
|
+
<template shadowrootmode="open">
|
|
37
|
+
<div id="shadow-div">
|
|
38
|
+
<span id="shadow-span"></span>
|
|
39
|
+
</div>
|
|
40
|
+
</template>
|
|
41
|
+
</my-element>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<script type="module">
|
|
45
|
+
import { getHighestCERNode } from '../getHighestCERNode.js';
|
|
46
|
+
|
|
47
|
+
const results = document.getElementById('results');
|
|
48
|
+
|
|
49
|
+
function logResult(testName, passed, message) {
|
|
50
|
+
const div = document.createElement('div');
|
|
51
|
+
div.className = `test-result ${passed ? 'pass' : 'fail'}`;
|
|
52
|
+
div.textContent = `${passed ? '✓' : '✗'} ${testName}: ${message}`;
|
|
53
|
+
results.appendChild(div);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Test 1: Element with default registry
|
|
57
|
+
const myElement = document.querySelector('my-element');
|
|
58
|
+
const result1 = getHighestCERNode(myElement);
|
|
59
|
+
logResult(
|
|
60
|
+
'Test 1',
|
|
61
|
+
result1 === document.body.parentElement,
|
|
62
|
+
`Element with default registry returns itself`
|
|
63
|
+
);
|
|
64
|
+
|
|
65
|
+
// Test 2: Create element with custom registry in shadow DOM
|
|
66
|
+
const shadowDiv = myElement.shadowRoot.querySelector('#shadow-div');
|
|
67
|
+
const customRegistry = new CustomElementRegistry();
|
|
68
|
+
const section = document.createElement('section', {
|
|
69
|
+
customElementRegistry: customRegistry
|
|
70
|
+
});
|
|
71
|
+
shadowDiv.appendChild(section);
|
|
72
|
+
|
|
73
|
+
const nestedDiv = document.createElement('div', {
|
|
74
|
+
customElementRegistry: customRegistry
|
|
75
|
+
});
|
|
76
|
+
section.appendChild(nestedDiv);
|
|
77
|
+
|
|
78
|
+
const result2 = getHighestCERNode(nestedDiv);
|
|
79
|
+
logResult(
|
|
80
|
+
'Test 2',
|
|
81
|
+
result2 === section,
|
|
82
|
+
`Nested element finds highest node with matching custom registry`
|
|
83
|
+
);
|
|
84
|
+
|
|
85
|
+
// Test 3: Element in shadow DOM with same registry as nested child
|
|
86
|
+
const shadowSpan = myElement.shadowRoot.querySelector('#shadow-span');
|
|
87
|
+
const result3 = getHighestCERNode(shadowSpan);
|
|
88
|
+
logResult(
|
|
89
|
+
'Test 3',
|
|
90
|
+
result3 !== null,
|
|
91
|
+
`Element in shadow DOM returns valid node`
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
// Test 4: Multiple levels with same custom registry
|
|
95
|
+
const div1 = document.createElement('div', {
|
|
96
|
+
customElementRegistry: customRegistry
|
|
97
|
+
});
|
|
98
|
+
const div2 = document.createElement('div', {
|
|
99
|
+
customElementRegistry: customRegistry
|
|
100
|
+
});
|
|
101
|
+
const div3 = document.createElement('div', {
|
|
102
|
+
customElementRegistry: customRegistry
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
div1.appendChild(div2);
|
|
106
|
+
div2.appendChild(div3);
|
|
107
|
+
section.appendChild(div1);
|
|
108
|
+
|
|
109
|
+
const result4 = getHighestCERNode(div3);
|
|
110
|
+
logResult(
|
|
111
|
+
'Test 4',
|
|
112
|
+
result4 === section,
|
|
113
|
+
`Multiple nested levels find the highest matching node`
|
|
114
|
+
);
|
|
115
|
+
|
|
116
|
+
console.log('All tests completed. Check results above.');
|
|
117
|
+
</script>
|
|
118
|
+
</body>
|
|
119
|
+
</html>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Inheritance</title>
|
|
7
|
+
<!-- #include virtual="/imports.html" -->
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<button>I am here</button>
|
|
11
|
+
|
|
12
|
+
<script type=module>
|
|
13
|
+
import { MOSE } from '../MOSE.js';
|
|
14
|
+
class MoseElement extends MOSE(HTMLElement){
|
|
15
|
+
|
|
16
|
+
}
|
|
17
|
+
customElements.define('mose-element', MoseElement);
|
|
18
|
+
</script>
|
|
19
|
+
<mose-element>
|
|
20
|
+
<script type=mountobserver src="mount-observer-script-element/tests/buttonMatch.json">
|
|
21
|
+
{
|
|
22
|
+
"?.assignOnMount?.style?.color": "red"
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
</mose-element>
|
|
26
|
+
<my-child-element>
|
|
27
|
+
<template shadowrootmode=open>
|
|
28
|
+
<button>You are here</button>
|
|
29
|
+
<mose-element id=child></mose-element>
|
|
30
|
+
</template>
|
|
31
|
+
</my-child-element>
|
|
32
|
+
</body>
|
|
33
|
+
</html>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Simple</title>
|
|
7
|
+
<!-- #include virtual="/imports.html" -->
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<button>I am here</button>
|
|
11
|
+
<script type=mountobserver src="mount-observer-script-element/tests/buttonMatch.json">
|
|
12
|
+
{
|
|
13
|
+
"?.assignOnMount?.style?.color": "red"
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
<script type=module>
|
|
17
|
+
import { MOSE } from '../MOSE.js';
|
|
18
|
+
class MoseElement extends MOSE(HTMLElement){
|
|
19
|
+
|
|
20
|
+
}
|
|
21
|
+
customElements.define('mose-element', MoseElement);
|
|
22
|
+
</script>
|
|
23
|
+
<mose-element></mose-element>
|
|
24
|
+
</body>
|
|
25
|
+
</html>
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ESNext",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"sourceMap": false,
|
|
6
|
+
"experimentalDecorators": false,
|
|
7
|
+
"newLine": "LF",
|
|
8
|
+
"strict": true,
|
|
9
|
+
"skipLibCheck": true
|
|
10
|
+
},
|
|
11
|
+
"files": [
|
|
12
|
+
"index.ts",
|
|
13
|
+
"getHighestCERNode.ts",
|
|
14
|
+
"MOSE.ts"
|
|
15
|
+
],
|
|
16
|
+
"exclude":[
|
|
17
|
+
"node_modules"
|
|
18
|
+
]
|
|
19
|
+
|
|
20
|
+
}
|