使用onMount将类动态添加到元素中

Question

使用sapper。试图创建一个输入并分配2个类"；名称边界"；到那个动态创建的输入元素。已创建元素，但未应用类。不知道为什么，希望有人能帮助我。风格部分有两个类"name"；以及"；"边界"；如果我将它们应用于html中的常规输入，它们就会工作并应用于任何创建的输入：

<input class="name border"/>

但是使用动态创建的输入，样式类不会添加到创建的元素中。我的简单组件有以下内容：

<script>
import { onMount } from 'svelte';

function getinfo(){
let x = document.querySelectorAll('input')
for (let i = 0; i < x.length; i++) {
let values = x[i].value;
console.log("input-value: ", values)
} 

}

onMount( () => {

var adiv = document.createElement('div');
var firstinput = document.createElement('input')       
firstinput.classList.add("name")
adiv.appendChild(firstinput); 


var parent = document.getElementById("parent");
parent.appendChild(adiv);         

// Apply the style class "name" settings to the input element
document.querySelector("input").classList.add("name")

var secondinput = document.createElement('input');      
adiv.appendChild(secondinput);
}

) //onMount

</script>
<style>
/* to create a bigger input */
.name{
font-size: 16pt;
height: 50px;
}

.border {
border-style : solid;
}
</style>
<h1> Enter Items </h1>
<form id="mainform" name="formcollect"  on:submit|preventDefault={getinfo}>

<div class="parent" id="parent">         
</div>        

<button type="submit">SAVE</button>
</form>

我做错了什么？

Answer 1

Svelte将删除未使用的样式。在这种情况下，Svelte不使用这些样式，而是有效地用于嵌套的纯js组件。如果你让它们全球化，Svelte不会删除它们。

<style>
/* to create a bigger input */
:global(.name) {
font-size: 16pt;
height: 50px;
}

:global(.border) {
border-style : solid;
} 
</style>