CODEWITHSUNDEEP
elementaureliacustom-attributescustom-element
ConductedClever
ConductedClever

Reputation: 4295

Aurelia custom attribute on containerless custom element, does not get element

I was developing a custom attribute named OnScreenKeyboardCustomAttribute in aurelia. After jobs went done, I was trying to use it an custom element which includes an input and I want this element to work on that input. By default I get the element inside the attribute class and expect it to be input or text field.

But while on that custom attribute, the input element is inside some other elements. So I think the next step is to move into element and achieve the inner input. This is possible but when the custom attribute has containerless annotation, I receive no element inside the attribute class and instead I receive <!--anchor-->. So how can I achieve to the inner element?

custom element - viewmodel

import {
  containerless,
} from 'aurelia-framework';

@containerless()
export class CInputCustomAttribute {
}

custom element - view

<template>
  <div class.bind="paClass ? paClass : 'row margin_bottom'">
    <div class.bind="labelClass ? labelClass : 'column_large_3 column_small_4'">
      <label for="${id}" class="label_inline" class.bind="errors.length ? 'text_red' : '' "><span class="required_star"
          if.bind="star">*</span>${label}</label>
    </div>

    <div class.bind="inputClass ? inputClass : 'column_large_9 column_small_8'">
      <input id="${id}" placeholder="${placeholder}" class="input toggle_input" class.bind="errors.length ? 'validate-error' : '' "
        value.bind="value" type="${type}" maxlength="${max ? max : 5000}" click.trigger="typeof runFunction=='function' ? runFunction():''">
      <span class="message_red">
        <template repeat.for="error of errors">
          ${error.error.message}<br>
        </template>
      </span>
    </div>
    <slot></slot>
  </div>
</template>

custom attribute - viewmodel

@inject(Element, BindingEngine)
export class PaOnScreenKeyboardCustomAttribute {

constructor(element, bindingEngine) {
    this.element = element;
    console.log(this.element);
  }

usage

<c-input type="text" id="username" pa-on-screen-keyboard max="11">

console: <!--anchor-->

Upvotes: 0

Views: 684

Answers (1)

Ashley Grant
Ashley Grant

Reputation: 10887

If you use containerless, there isn't an element to pass to your custom attribute. That's the nature of using containerless. The custom element is removed from the markup at runtime, but your custom attribute has to be attached somewhere, so the framework puts it on the "anchor" comment element. And thus, that's what it passes in to your attribute.

My recommendation, and this is always my recommendation, is to not use containerless unless it is absolutely necessary. Don't use containerless b/c it "makes your markup look nicer at runtime" or because "the custom element being there breaks our CSS." I've been building Aurelia applications since before it was publicly announced, and aside from wrapping third party components where I can't modify the CSS, I have yet to have a need use containerless. I even have a rule to not use it in my TSLint rules.

And a situation like this is the exact reason I avoid using containerless. It causes wonky issues. Custom elements generally should be just that.. elements. And a containerless element isn't really an element.

Upvotes: 1

Related Questions