Hello 

I want to create a ribbon widget like the one in Odoo 13 and I am able to get the UI as I want but dynamic attributes using attrs attribute are not working. The last widget tag with the attribute title="SUCCESS" is always visible.

Here is the js code

odoo.define('web.ribbon', function (require) {
    'use strict';

    var widgetRegistry = require('web.widget_registry');
    var Widget = require('web.Widget');

    var RibbonWidget = Widget.extend({
        template: 'web.ribbon',
        xmlDependencies: ['/my_crm/static/src/xml/ribbon.xml'],

        init: function (parent, data, options) {
            this._super.apply(this, arguments);
            this.text = options.attrs.title || options.attrs.text;
            this.bgColor = options.attrs.bg_color;
            this.aTTRS = options.attrs.attrs;
        }

    });

    widgetRegistry.add('web_ribbon', RibbonWidget);

    return RibbonWidget;
});

Here is the xml (static) code

<template>
    <t t-name="web.ribbon">
        <div class="ribbon ribbon-top-right" t-att-attrs="widget.aTTRS">
            <span t-att-class="widget.bgColor ? widget.bgColor : 'bg-success'">
                <t t-esc="widget.text"/>
            </span>
        </div>
    </t>
</template>

Here is the xml (back end view) code

<widget name="web_ribbon" title="DANGER" bg_color="bg-danger"
        attrs="{'invisible': [('x_brut_margin', '&gt;', 5)]}"/>
<widget name="web_ribbon" title="WARNING" bg_color="bg-warning"
        attrs="{'invisible': ['|',('x_brut_margin', '&lt;=', 5),('x_brut_margin', '&gt;', 20)]}"/>
<widget name="web_ribbon" title="SUCCESS"
        attrs="{'invisible': [('x_brut_margin', '&lt;', 20)]}"/>

Here is the rendered html code

<div class="ribbon ribbon-top-right" attrs="{'invisible': [('x_brut_margin', '&gt;', 5)]}">
 <span class="bg-danger">
 DANGER
 </span>
</div>
<div class="ribbon ribbon-top-right"
 attrs="{'invisible': ['|',('x_brut_margin', '&lt;=', 5),('x_brut_margin', '&gt;', 20)]}">
 <span class="bg-warning">
 WARNING
 </span>
</div>
<div class="ribbon ribbon-top-right" attrs="{'invisible': [('x_brut_margin', '&lt;', 20)]}">
 <span class="bg-success">
 SUCCESS
 </span>
</div>