Question

我是网络组件的新手。

我正在尝试创建一个看起来像＆＃34;下拉/选择＆＃34;的网络组件。

当元素关闭但可见（未展开）时，我希望它在网页的常规流程中显示在屏幕上。在它下面是一些不属于控件的文本。

扩展控件时，展开的部分应覆盖（在上方）控件下显示的文本。

在实践中，正在推翻文本。更改控件的css会将可视部分放在应该位于其下方的文本上。

我很感激如何解决创建控件的问题，其中一部分应该在＆＃34; flow＆＃34;网页和其他部分应该＆＃34;浮动＆＃34;在网页上方并且与视觉部分相关。

以下代码是网络组件：drop-down.html

    <template id="drop-down">
    <style>
        .row {
            z-index: 5;
            position:relative;
            background-color: white;
        }
        .drop-down {
            z-index: 5;
            position: relative;
            background-color: red;
        }
    </style>
    <div class="drop-down">
        <div class="row">
            <button onclick="addListElement(this);">+</button>
            <input type="text" placeholder="Enter List Item">
        </div>
    </div>
</template>

<template id="list-item">
    <div class="row">
        <button onclick="addListElement(this);">+</button>
        <input type="text" placeholder="Enter List Item">
    </div>
</template>

<script>
    let ddTemplate = document.currentScript.ownerDocument.querySelector('#drop-down');
    let liTemplate = document.currentScript.ownerDocument.querySelector('#list-item');

    customElements.define('drop-down', class extends HTMLElement {
        constructor() {
            super(); // always call super() first in the ctor.
            let shadowRoot = this.attachShadow( {mode: 'open'} );
            shadowRoot.appendChild( ddTemplate.content.cloneNode( true ));
        }
     });

    function addListElement( el ) {
        var parent = el.parentNode;
        parent.parentNode.appendChild(liTemplate.content.cloneNode(true));
    }
</script>

测试它的html如下：testDropDown.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test Drop-Down</title>

        <link rel="import" href="./drop-down/drop-down.html">
    </head>
    <body>
        <drop-down>My Drop Down</drop-down>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br/>
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim<br/>
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br/>
        aliquip ex ea commodo consequat. Duis aute irure dolor in<br/>
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla<br/>
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in<br/>
        culpa qui officia deserunt mollit anim id est laborum."
        </p>
    </body>
</html>

Web组件 - 如何设置重叠组件的样式 - 看起来像下拉列表

0 个答案: