Question

我为跨多个项目的通用输入框创建了一个Web组件。设计功能保持不变，只是我必须在每个项目上使用切换主题。所以我决定继续使用webcomponents。其中一个项目是基于Vue Js。在Vue js中，DOM内容在每次更新时都会重新呈现启用反应性。 Vue模板的重新渲染正在重新初始化我的自定义Web组件，这将导致丢失我已使用设置器分配给该组件的所有配置。我知道以下解决方案。但是我想使用setter方法。

将数据作为属性传递
基于事件的配置传递。
使用Vue指令。
使用v-show代替v-if

-以上三种解决方案与我要创建的解决方案并不完全匹配。

我在jsfiddle中创建了一个示例项目来显示我的问题。每次我取消选中并选中复选框时，都会创建我的组件的新实例。这导致失去我选择的主题。（请检查他的活动箱数）对于此特定示例，我希望显示蓝色主题。但它一直变成红色

JSFiddle direct Link

class InputBox extends HTMLElement {
    constructor() {
        super();
        window.activeBoxes ? window.activeBoxes++ : window.activeBoxes = 1;
        var shadow = this.attachShadow({
            mode: 'open'
        });
        var template = `
        	<style>
          	.blue#iElem {
            	background: #00f !important;
            	color: #fff !important;
            }
						.green#iElem {
            	background: #0f0 !important;
            	color: #f00 !important;
            }
            #iElem {
                background: #f00;
                padding: 13px;
                border-radius: 10px;
                color: yellow;
                border: 0;
                outline: 0;
                box-shadow: 0px 0px 14px -3px #000;
              
            }
          </style>
        	<input id="iElem" autocomplete="off" autocorrect="off" spellcheck="false" type="text" />
        `;
        shadow.innerHTML = template;
        this._theme = 'red';
        
        this.changeTheme = function(){
        	this.shadowRoot.querySelector('#iElem').className = '';
    			this.shadowRoot.querySelector('#iElem').classList.add(this._theme);
        }
        
    }
    connectedCallback() {
    	this.changeTheme();
    }
    set theme(val){
    	this._theme = val;
      this.changeTheme();
		}
}
window.customElements.define('search-bar', InputBox);

<!DOCTYPE html>
<html>
  <head>
    <title>Wrapper Component</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
      html,
      body {
        font: 13px/18px sans-serif;
      }
      select {
        min-width: 300px;
      }
      search-bar {
        top: 100px;
        position: absolute;
        left: 300px;
      }
      input {
        min-width: 20px;
        padding: 25px;
        top: 100px;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="el"></div>

    <!-- using string template here to work around HTML <option> placement restriction -->
    <script type="text/x-template" id="demo-template">
      <div>
      	
      	<div class='parent' contentEditable='true' v-if='visible'>
          <search-bar ref='iBox'></search-bar>
        </div>
        <input type='checkbox' v-model='visible'>
      </div>
    </script>

    <script type="text/x-template" id="select2-template">
      <select>
        <slot></slot>
      </select>
    </script>

    <script>
      var vm = new Vue({
        el: "#el",
        template: "#demo-template",
        data: {
          visible: true,
        },
        mounted(){
        		let self = this
            setTimeout(()=>{
              self.$refs.iBox.theme = 'blue';
            } , 0)
        }        
      });
    </script>
  </body>
</html>

Answer 1

<div class='parent' contentEditable='true' v-if='visible'>
     <search-bar ref='iBox'></search-bar>
</div>
<input type='checkbox' v-model='visible'>

Vue的v-if将在DOM中添加/删除整个DIV

因此，每次选中复选框时，也会添加/删除<search-bar>

如果您想要<search-bar>的状态，则必须将其保存在<search-bar>组件的外部的某个位置：

JavaScript变量
localStorage
.getRootnode().host
CSS Properties我会喜欢这个，因为它们滴入了ShadowDOM
...
...

或将您的复选框代码更改为不使用v-if，而是隐藏 <div>与任何CSS：

显示：无
可见性：隐藏
不透明度：0
移至屏幕外位置
高度：0
...

和/或...

使用样式表管理多个屏幕元素

您可以使用<style>元素轻松切换样式：

<style id="SearchBox" onload="this.disabled=true">
 ... lots of CSS
 ... even more CSS
 ... and more CSS
</style>

onload事件可确保在页面加载时未未应用<style>。

激活所有 CSS样式：
(this.shadowRoot || document).getElementById("SearchBox").disabled = false

删除所有 CSS样式：
(this.shadowRoot || document).getElementById("SearchBox").disabled = true

您确实需要CSS Properties才能与shadowDOM Elements组合使用。

我更喜欢Native而不是Frameworks。 <style v-if='visible'/>将可以通过残酷地删除/添加样式表来工作。

每次使用Vue js时，Webcomponents都会重新初始化

1 个答案:

使用样式表管理多个屏幕元素