0

在哪里可以将 quarkus qute 与 Web 组件一起使用？我试图在带有参数 {user.username} 的 Qute 模板中使用用户卡自定义元素，例如

用户.html

<div>
    ...
    <user-card
            name="John Doe"
            avatar="https://randomuser.me/api/portraits/men/1.jpg">
        <div slot="email">{user.username}</div>
        <div slot="phone">+41 76 234 44 55</div>
    </user-card>
    ...
    <script src="userCard.js"></script>
</div>

用户卡.js：

const template = document.createElement('template');
template.innerHTML = `
    <style>
        .user-card {
            font-family: 'Arial', sans-serif;
            background: #f4f4f4;
            width: 500px;
            display: grid;
            grid-template-columns: 1fr 2fr;
            grid-gap: 10px;
            margin-bottom: 15px;
            border-bottom: darkorchid 5px solid;
        }
        ...
       
    </style>
    <div class="user-card">
        <img />
        <div>
            <h3></h3>
            <div class="info">
                <p><slot name="email" /></p>
                <p><slot name="phone" /></p>
            </div>
            <button id="toggle-info">Hide Info</button>
        </div>
    </div>
`;

class UserCard extends HTMLElement {
    constructor() {
        super();

        this.showInfo = true;

        this.attachShadow({mode: 'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));
        this.shadowRoot.querySelector('h3').innerHTML = this.getAttribute('name');
        this.shadowRoot.querySelector('img').src = this.getAttribute('avatar');
    }
    ...
}

window.customElements.define('user-card', UserCard);

添加后将抛出以下异常：

2021-10-25 17:11:36,002 ERROR [io.qua.dep.dev.IsolatedDevModeMain] (main) Failed to start quarkus: java.lang.RuntimeException: io.quarkus.builder.BuildException: Build failure: Build failed due to errors
        [error]: Build step io.quarkus.qute.deployment.QuteProcessor#analyzeTemplates threw an exception: io.quarkus.qute.TemplateException: Parser error in template [shared/.DS_Store] on line 5: unexpected non-text buffer at the end of the template - unexpected state [CDATA]: }~��
componentsvSrnlong
                  @� @ @ @
                          E     DSDB ` @ @ @
        at io.quarkus.qute.Parser.parserError(Parser.java:503)
        at io.quarkus.qute.Parser.parserError(Parser.java:492)
        at io.quarkus.qute.Parser.parse(Parser.java:149)
        at io.quarkus.qute.EngineImpl.load(EngineImpl.java:138)
        at java.base/java.util.concurrent.ConcurrentHashMap.computeIfAbsent(ConcurrentHashMap.java:1708)
        at io.quarkus.qute.EngineImpl.getTemplate(EngineImpl.java:116)
        at io.quarkus.qute.deployment.QuteProcessor.analyzeTemplates(QuteProcessor.java:459)

...

感谢您的帮助。亲切的问候。

4

0 回答 0