Symfony中自定义Web组件表单输入值无法在POST请求中获取的问题排查

我正在尝试基于Web组件在Symfony中构建自定义表单类型，为了简化，我先做了一个自定义输入组件。这个组件在纯HTML表单里能正常工作，但在Symfony中使用时，它的值不会出现在POST请求里。

自定义Web组件代码 #

export class CustomInput extends HTMLElement {
    static formAssociated = true;

    static get observedAttributes() {
        return ['value', 'name'];
    }

    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.internals = this.attachInternals();
        this.render();
    }

    get inputElement() {
        return this.shadowRoot.querySelector('input');
    }

    connectedCallback() {
        this.inputElement.addEventListener('input', (event) => {
            this.value = event.target.value;
        });
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'value' && oldValue !== newValue) {
            this.value = newValue || '';
        }
    }

    get value() {
        return this.inputElement.value;
    }

    set value(newValue) {
        this.inputElement.value = newValue;
        this.internals.setFormValue(newValue);
    }

    render() {
        this.shadowRoot.innerHTML = `
            <input type="text" />
        `;
    }
}

customElements.define('p-input', CustomInput);

Symfony相关代码实现 #

自定义表单类型 #

我在Symfony中添加了对应的自定义表单类型：

final class CustomInputType extends AbstractType
{
    public function getParent(): string
    {
        return TextType::class;
    }
}

表单类型对应的Twig模板 #

{%- block custom_input_widget -%}
    <p-input type="text" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}></p-input>
{%- endblock custom_input_widget -%}

（注：该Twig文件已在twig.yaml的form_themes中注册）

使用自定义表单类型的表单类 #

final class TestForm extends AbstractType
{

    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
       $builder->add('title', CustomInputType::class, [
            'label' => 'test.title',
        ]);
       // other fields
    }
}

渲染表单的Twig代码 #

<div class="form">
    {{ form_start(form, {'attr': {'id':'test_edit_form' }}) }}
    {{ form_errors(form) }}
    
   <div class="element">
        <div class="label">{{ form_label(form.title) }}</div>
        <div class="input">{{ form_widget(form.title) }}</div>
    </div>

    {# more form elements #}

    <button type="submit">Submit</button>
            
    {{ form_rest(form) }}
    {{ form_end(form) }}
</div>

当前表现 #

组件能正常渲染，当底层数据对象预填充时也能正确设置值，自定义元素也拥有和其他表单元素一致的name属性，渲染后的HTML如下：

<form name="test_form" method="post" action="/test/edit" id="test_edit_form">
        <div class="element">
            <div class="label"><label for="test_form_title" class="required">Title</label></div>
            <div class="input"><p-input id="test_form_title" name="test_form[title]" required="required" value="Test"></p-input></div>
        </div>
        
        <div class="element">
            <div class="label"><label for="test_form_number" class="required">Number</label></div>
            <div class="input">    
                <select id="test_form_number" name="test_form[number]" required="required">
                <option disabled="disabled" value="">Select...</option>
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                </select>
            </div>
        </div>
        <!-- ... -->
</form>

但当我提交表单时，POST请求里完全看不到这个自定义元素的值——其他原生输入元素的值都能正常出现，只有这个自定义组件的值缺失。有没有人能帮我找出哪里遗漏了？

备注：内容来源于stack exchange，提问作者stedekay