2. Можно ввести ключевое слово для вывода контента по-умолчанию. Например __yield__:
td > :datePicker {
р4 > 'test'

:dualbind value='date' getter='getDate' setter='setDate';

__yield__

:customTag > button x-signal='click: clicked' > 'Click';
}

__________

Или есть у вас другие идеи?

Как я себе это представляю:
1. Каждый компонент содержит набор свойств и модель по-умолчанию. Доступ к свойствам осуществляется через прослойку (backend). Для HTML, свойства — это DOM узлы. У каждого свойства есть шаблон по-умолчанию, это может быть просто вставка в innerHTML или аттрибут (src для тега img) или что-то сложнее.

2. К компоненту может быть привязана кастомная модель, которая переопределяет доступ к одному или нескольким свойствам, или переопределять шаблоны валидации всей модели или отдельных свойств.

3. У каждого компонента есть контроллер по-уломчанию, который может быть заменён или расширен кастомным конроллером.

4. Контроллеры компонента не имеют доступа к DOM API и не подписываются на DOM события.
Фреймворком должен быть определён набор сандартных событий в которые будут транслироваться DOM события, типа «active:start» (mousedown, touchstart), «active:end» (mouseup, touchend), «hover:start» (mouseenter), «hover:end» (mouseleave), «action» (click, submit) и т.д.
Обработчик события можно повесить только на свойство компонента.

5. Каждое свойство — это некий узел (Node для HTML backend) который может отлавливать события. При возникновении какого-либо события, класс с таким же именем устанавливаться/снимается на узел привязанный к свойству — Например, node.classList.add(«active») для «active:start» и node.classList.add(«remove») для «active:end».

6. К компоненту может быть привязан источник данных. Это может быть как и просто массив, так и класс имплиментирущий абстрактный интерфейс ModelDataView с методами получения/записи/фильтрации данных.

7. В модели описано, какие узлы array-like и какие одиночные, поэтому при применении данных на шаблон, array-like автоматически склонируются, и не нужно никаких each в коде шаблона

8. В шаблоне, на один узел может быть повешено более одного компонента.

Абстрактный шаблон компонента ImageGallery

используется псевдо-HTML

= section :ImageObject extend :MediaObject # '= ' - объявление компонента
    p ::name
    image ::contentURL
    body
        p ?::author # '?' - узел будет создан только если свойство присутствует в источнике данных
        data ?::datePublished

= section :ImageGallery extend :CollectionPage
    header
        hx ::name
        p ?::description
        image ?::image
    body #
        ::primaryImageOfPage[ :ImageObject ] # свойство суб-компонент типа ImageObject
    footer
        ::associatedMedia[ :ImageObject ] # превьюшки, суб-компоненты типа ImageObject

Контроллер

class ImageObject_controller extend MediaObject_controller {
    constructor(el) {
        super(el);
    
        this.model = _.getModel(el); // _ - глобальная переменная фреймворка
        this._el = _(el); // обёртка над Node элементом (в случае html backend)
    }

    openImage(imageObject = 0) {
        if ( Number.isInteger( imageObject ) ) {
            imageObject = this.model.associatedMedia[ imageObject ];
        }

        if ( !imageObject ) return;

        this.model.primaryImageOfPage = imageObject; //тут вызывается setter у модели
    }

    events: {
        "associatedMedia action": function(event) {
            let {target, metaKey} = event; // деструкруризация let target = event.target, type = event.type
            
            if ( !metaKey ) {
                this.openImage(target);
            }
            else { // Нажали Ctrl + click - открыти картинку в новом окне
                let model = _.getModel(el)
                    , url
                ;
                                
                if ( model && (url = model.url) ) {
                    _.globalRouter.openInNewWindow(url);
                }
            }
        }
    }
}

Модель

class ImageObject_model extend MediaObject_model {
    constructor(dataView) {
        super(dataView);
        
        this.dataView = dataView;
    }

    get associatedMedia() {
        return this.dataView.get("associatedMedia");
    }

    set associatedMedia(singleOrArray) {
        if ( !_.validate("associatedMedia", singleOrArray, this.validation ) {
            throw new ValidationError(_.validate.lastError);
        }
    
        if ( Array.isArray(singleOrArray) ) { // Если массив значению
            return this.dataView.replace("associatedMedia", singleOrArray); // заменяем всю коллекцию
        }
    
        // Если один объект
        return this.dataView.add("associatedMedia", singleOrArray); // то добавляем его вколлекцию
        
    }
    
    // ... остальные свойства
    
    validation: { // Валидация
        ":scope": function() { // ":scope" ссылка на "всю" модель
            // ...
            // валидация всей модели
        }
    
        "associatedMedia": function(obj) {
            return obj.contentURL && obj.name;
        }
    }
}

Применение в шаблоне

!!!
html
    head
        js 'script/something.js'

body.image-gallery :ImageGallery /images/get/92188?from=0&to=10 # /images/get/* ссылка на источник данных
    # Устанавливаем css класс и текст по-умолчанию
    .image-gallery__author ::author ? "Автор не указан"

Прошу прощения за длинный комментарий