We need to add the QWeb definition in the manifest and change the JavaScript code so that we can use it. Follow these steps to get started:

1. Import web.core and extract the qweb reference into a variable, as shown in the following code:

odoo.define('my_field_widget', function (require) {
"use strict";

var AbstractField = require('web.AbstractField');
var fieldRegistry = require('web.field_registry');
var core = require('web.core');

var qweb = core.qweb;
...

2. Change the _renderEdit function to simply render the element (inherited from widget):

    _renderEdit: function () {
        this.$el.empty();
        var pills = qweb.render('FieldColorPills', {widget: this});
        this.$el.append(pills);
    },

3. Add the template file to static/src/xml/qweb_template.xml:

<?xml version="1.0" encoding="UTF-8"?>
<templates>
    <t t-name="FieldColorPills">
        <t t-foreach="widget.totalColors" t-as='pill_no'>
            <span t-attf-class="o_color_pill o_color_#{pill_no} #{widget.value === pill_no and 'active' or ''}"
            t-att-data-val="pill_no"/>
        </t>
    </t>
</templates>

4. Register the QWeb file in your manifest:

"qweb": [ 
      'static/src/xml/qweb_template.xml', 
    ],

Now, with other add-ons, it is much easier to change the HTML code our widget uses, because they can simply override it with the usual QWeb patterns.