webcomponents/example.html at master · direktspeed/webcomponents · GitHub

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Observer Implementation</title>
</head>
<body>

    <h1>Dynamic Element Upgrades</h1>
    <p>New elements added below will be dynamically modified by the registry.</p>
    <div id="container">
        <!-- Elements will be added here -->
    </div>

    <button onclick="addGenericElement()">Add Generic Element</button>
    <button onclick="addMyComponent()">Add 'my-component-name'</button>

    <script src="registry.js">
        /**
         * ---------------------------------------------------------------------
         *  EXAMPLE USAGE
         * ---------------------------------------------------------------------
         */

        // 1. Create a global registry listening on the entire document body
        const myRegistry = new customElement.Registry(document.body);

        // 2. Register an expression that applies a connectedCallback-like function to every new element.
        // This expression will turn the border of any new element green.
        const expressionOne = function(elem) {
            console.log('Expression 1 applied to:', elem.tagName);
            elem.style.border = '2px solid green';
            // Mimic connectedCallback
            if (typeof elem.connectedCallback === 'function') {
                elem.connectedCallback();
            }
        };
        myRegistry.define(expressionOne);

        // 3. Register a more specific expression for elements with is="my-component-name"
        const expressionTwo = function(elem) {
            if (elem.getAttribute('is') === 'my-component-name') {
                console.log('Expression 2 applied to my-component-name');
                // Define and immediately call a "connectedCallback"
                elem.connectedCallback = function() {
                    this.innerText = 'Yahh works';
                    this.style.backgroundColor = 'yellow';
                    this.style.padding = '10px';
                    this.style.display = 'block'; // Make div visible
                };
                elem.connectedCallback();
            }
        };
        myRegistry.define(expressionTwo);


        /**
         * ---------------------------------------------------------------------
         *  DEMO FUNCTIONS
         * ---------------------------------------------------------------------
         */
        const container = document.getElementById('container');

        function addGenericElement() {
            const newDiv = document.createElement('div');
            newDiv.innerText = 'I am a generic element.';
            newDiv.style.margin = '10px 0';
            container.appendChild(newDiv);
        }

        function addMyComponent() {
            const newComp = document.createElement('div');
            // 'is' is traditionally for extending built-in elements,
            // but we use it here as a simple selector for our expression.
            newComp.setAttribute('is', 'my-component-name');
            newComp.style.margin = '10px 0';
            container.appendChild(newComp);
        }

    </script>
</body>
</html>