如何设置Vaadin TextArea初始行数为1并修改Shadow DOM内部元素属性

你可以直接在现有代码基础上补充组件初始化监听逻辑，修改后的完整代码如下：

const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<dom-module id="our-project-text-area" theme-for="vaadin-text-area"> 
  <template> 
   <style>            
      :host [part="input-field"] {
        font-weight: lighter;
      }
      
      :host [part="input-field"]::after {
        background-color: var(--mainColor);
      }
      
      :host([focused]:not([invalid])) [part="label"] {
        color: var(--mainColor);
      }
    </style> 
  </template> 
 </dom-module>`;

document.head.appendChild($_documentContainer.content);

// 以下为新增代码
customElements.whenDefined('vaadin-text-area').then(() => {
  const TextArea = customElements.get('vaadin-text-area');
  const originalReady = TextArea.prototype.ready;
  TextArea.prototype.ready = function() {
    originalReady.call(this);
    // 定位Shadow DOM内的目标textarea元素
    const textareaElement = this.shadowRoot.querySelector('textarea[part="value"]');
    if (textareaElement) {
      textareaElement.setAttribute('rows', '1');
    }
  };
});

相关说明 #

• 注意：原代码中style标签内部多了一对无用的大括号，上述代码已经做了修正，避免出现样式不生效的问题
• 新增的customElements.whenDefined逻辑会等待Vaadin TextArea组件加载完成后再执行，避免出现组件未定义的报错
• 重写组件原生的ready生命周期方法，保证组件内部DOM渲染完成后再操作元素
• 通过shadowRoot.querySelector可以直接定位到组件Shadow DOM内的指定元素，设置属性即可生效，最终实现TextArea初始行数为1、和TextField外观一致的需求

内容的提问来源于stack exchange，提问作者Mathias