Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
2.0 kB
3
Indexable
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A4E1</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
        integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="infomessage.js"></script>
</head>

<body>
    <div class="wrapper">
        <info-message>
            <span slot="title">Important!</span>
            <ul slot="message">
                <li>
                    <strong>Custom Element:</strong>
                    A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be
                    used as desired in your user interface.
                </li>
                <li>
                    <strong>Shadow DOM:</strong>
                    A set of JavaScript APIs for attaching
                    an encapsulated "shadow" DOM tree to an element — which is rendered
                    separately from the main document DOM — and controlling associated
                    functionality. In this way, you can keep an element's features
                    private, so they can be scripted and styled without the fear of
                    collision with other parts of the document.
                </li>
                <li>
                    <strong>HTML templates:</strong>
                    The <code>&lt;template&gt;</code> and <code>&lt;slot&gt;</code> elements
                    enable you to write markup templates that are not displayed in the
                    rendered page. These can then be reused multiple times as the basis
                    of a custom element's structure.
                </li>

            </ul>
        </info-message>
    </div>
</body>

</html>
Leave a Comment