Livereload shadow dom web components

[kmturley]

I have a simple web component demo, with a single component containing html, css and js. I would like to reload the exact asset when it changes (NOT the entire page).

gulp.task('watch', function () {
    gulp.watch(['/**/*.css'], function (event) { console.log('css', event.path); gulp.src(event.path).pipe(connect.reload()); });
    gulp.watch(['/**/*.html'], function (event) { gulp.src(event.path).pipe(connect.reload()); });
    gulp.watch(['/**/*.js'], function (event) { gulp.src(event.path).pipe(connect.reload()); });
});

When I modify any html/js files they are updated automatically via livereload and it works! EVEN if the html or js is INSIDE the web component e.g.

<link href="header-custom.css" rel="stylesheet" />
<template>
    <p>Hello <strong></strong></p>
</template>
<script src="header-custom.js"></script>

However when updating css files inside the same webcomponent it does not livereload :( The event does fire correctly, so watch is detecting the file has changed, and the correct path:

css /web-components/src/components/header-custom/header-custom.css

I'm guessing the issue might be because the css is extracted from the web components and placed into the head of the document? This is how the page is rendered after a web component is loaded:

I believe it's a bug, or an unsupported feature, which just happens to work for html/js but not css!

Full source code is here:
https://github.com/kmturley/web-components

Demo:
http://kmturley.github.io/web-components/src/

[kmturley]

When using the command:

DEBUG=* gulp

And then editing the js file, it reaches connect:dispatcher:

tinylr:server param files +4s { files: '/web-components/src/components/header-custom/header-custom.js' } undefined undefined [ '/web-components/src/components/header-custom/header-custom.js' ]
tinylr:server Changed event (Files: /web-components/src/components/header-custom/header-custom.js) +0ms
tinylr:server Reloading client ws0 (url: http://localhost:8181/src/) +0ms [ '/web-components/src/components/header-custom/header-custom.js' ]
tinylr:client reload +0ms [ '/web-components/src/components/header-custom/header-custom.js' ]
tinylr:client send +1ms { command: 'reload',
path: '/web-components/src/components/header-custom/header-custom.js',
liveCSS: true,
liveJs: true,
liveImg: true }
connect:dispatcher livereload  : /src/ +6ms
connect:dispatcher serveStatic  : /src/ +1ms
send stat "/web-components/src/index.html" +1ms
send pipe "/web-components/src/index.html" +1ms

But editing a css file, it does not reach connect:dispatcher:

tinylr:server param files +12s { files: '/web-components/src/components/header-custom/header-custom.css' } undefined undefined [ '/web-components/src/components/header-custom/header-custom.css' ]
tinylr:server Changed event (Files: /web-components/src/components/header-custom/header-custom.css) +1ms
tinylr:server Reloading client ws0 (url: http://localhost:8181/src/) +0ms [ '/web-components/src/components/header-custom/header-custom.css' ]
tinylr:client reload +0ms [ '/web-components/src/components/header-custom/header-custom.css' ]
tinylr:client send +0ms { command: 'reload',
path: '/web-components/src/components/header-custom/header-custom.css',
liveCSS: true,
liveJs: true,
liveImg: true }