fix: always apply inherited styles

vaadin/vaadin-themable-mixin#81

Author: web-padawan

packages/vaadin-themable-mixin/test/themable-mixin.test.js

@@ -316,8 +316,8 @@ describe('ThemableMixin', () => {
     expect(getComputedStyle(components[2].$.text).width).to.equal('100px');
   });
 
-  it('should not inherit parent themes to own custom template', () => {
-    expect(getComputedStyle(components[4].$.text).backgroundColor).not.to.equal('rgb(255, 0, 0)');
+  it('should inherit parent themes to own custom template', () => {
+    expect(getComputedStyle(components[4].$.text).backgroundColor).to.equal('rgb(255, 0, 0)');
   });
 
   it('should override vaadin module styles', () => {

packages/vaadin-themable-mixin/vaadin-themable-mixin.js

@@ -13,10 +13,9 @@ export const ThemableMixin = (superClass) =>
 
       const template = this.prototype._template;
 
-      const hasOwnTemplate = Object.prototype.hasOwnProperty.call(this, 'template');
       const inheritedTemplate = Object.getPrototypeOf(this.prototype)._template;
-      if (inheritedTemplate && !hasOwnTemplate) {
-        // The element doesn't define its own template -> include the theme modules from the inherited template
+      if (inheritedTemplate) {
+        // Include the theme modules from the inherited template
         Array.from(inheritedTemplate.content.querySelectorAll('style[include]')).forEach((s) => {
           this._includeStyle(s.getAttribute('include'), template);
         });