<BoCupp> scribe: bocupp

json, css, and HTML modules

<TabAtkins> ScribeNick: TabAtkins

danclark: [introduces]
... Talking abou tne wmodule types: json, css, html
... Gonna introduce, show hwo they work, show snippets, why they're useful for web devs.
... Some might be recap, some might be new to you.
... lastly, open issues and design questions
... Problem to solve is today, to write a web comp that's reusable and importable, the ony way to package it is with JS, primarily JS modules.
... The css and html doesn't have a home, it lives in the JS.
... We'd like to empower authors to write html as html, etc for inclusion with their components
... We already have a great tool for dep management in JS.
... JS odules gives me static dependencies, parallel loading, clear syntax for API surface
... A module can define what it exports, importer can define what they want to import
... And they're only loaded once, even if they're imported multiple times
... So that's great for JS, but dont' ahve a story for html and css
... There's some work to be done in advance for css/html modules
... Synthetic module record has been specced
... Idea is I take some resource, like JSON, which can be projected into JS, if i want to plug them into the mod ule graph there's some common boilerplate I need to achieve that, both in spec and impls.
... Synthetic module spec formalized that boilerplate
... So we implemented synthmod records in Blink/v8
... Then did JSON modules, with Igalia, behind a flag.
... I just import JSON resource, get a JSON object.
... CSS modules are an integration of constructable stylesheets into the module system
... [shows code example using adoptedStylesheets]
... Why want this?
... If i'm developing a webcomp and want to include styles, all the ways have rough edges
... most obvious is a <style> element in the shadow dom. Ergonomics, there's an extra element there now. Might be some perf implications too.
... Alternatively I can use constructable stylesheets directly, inlining CSS in my JS and make a stylesheet. Not great for ergonomics again, lots of CSS in JS. And perf again, processing it twice.
... Can get around this by fetching and stuffing into constructable stylesheet directly, but then i'm manually managing these fetches. Lots to get right.
... [shows before/after of a webcomp using css modules]
... Lastly, Html modules
... Same idea here, building html for custom elements requires HTML as a JS string, or doing lots of document.createElement() with lots of dom operations, totally unreadable.
... [shows off html module example]
... HTML module returns a document object, I can append it wherever I want
... Don' thave to manually build that dom in a tricky way
... Progress: JSON modules, thanks to Igalia, are in HTML spec. Built in blink behind flag.
... CSS modules, prototyped in Blink, spec draft.
... HTML modules, similar to CSS.
... we consider css modules kinda a prereq to html modules, we'll cover some details of that later
... Any questions so far?

heycam: Do you see much benefit for css modules beyond just inserting a <link> into the shadow tree?

danclark: Dev ergonomis, we don't want to mess with the dom. It's a little easier without an extra element there.
... Also, a <link> means I have a new instance of the stylesheet in each instance of th ecustom element.
... CSS Module means I know it's all the same, even if it's from different custom elements.

heycam: Is this because you want to modify them?

danclark: Possibly yes.

heycam: Because browsers shoudl dedup automatically
... Okay, then import, it's not too much work to map a fetch to a consructed stylesheet.

danclark: Interesting with more dependencies. A widget library tehat shares stylesheets, it's nice to plug into the module system and not worry abou tmaanging the fetch calls.
... And when combining module types, a JS module that defines and lemeent and imports a css module, i know that by th etime by JS code is executing, I already know my CSS is available and processed.
... Just one stylesheet, import isn't that interesting, but in non-trivial situations module graph give syou a lot of power and ease.

[something about base urls from Jake]

ThomasSteiner: Is there a naming question? You can't tell whether it's css, json, etc from the statement.

danclark: That's my third open issue on this slide, i'll loop back to it.

rniwa: Which repo do we file issues on?

danclark: the web components repo, w3c/web-components

w3c/webcomponents

MikeSmith: CSS modules is mainly intended for web components use-case?

danclark: That's our primary right now, yeah.

phil cupp: I could see a replacement for scoped style, where stylesheets hang off of elements, etc.

BoCupp: But right now it's limited to shadow roots, yeah.

<tomayac> The issue is https://github.com/w3c/webcomponents/issues/759

MikeSmith: We already have a way to import CSS into an html document, we don't have one for html, so for the dev community we want to be more clear about what problem we're solving that isn't the <link> element.

jake archibald: CSS doesn't need CORS normally, does that affect modules here?

danclark: Same semantics as JS modules, it requires CORS approval for cross-origin stuff

TabAtkins: I approve of this.

thomasSteiner: Browser vendor feedback?

BoCupp: We have some interest from annevk in discussions (firefox), maybe ryosuke wants to say something

rniwa: We'r enot opposed, we like th eidea of improving dev experience, but we do have some concerns with mime-type issue, etc. And maybe something with dynamic import behavior.

jake archibald: Bundlers have this issue already, how to interpret a resource. Like an image, is it a blob, or a data url, etc.

danclark: So first open issue: how does @import work in the stylesheet?
... First obvious way is handle them same as normal stylesheets.
... When I include an @import in two different imported sheets, I'll have two different stylesheet objects.

(an @import of the same url)

danclark: Anothe roption is to treat an @import in a CSS module as a module in their own right; they stop being leaf modules.
... Most interesting effect here is that multiple stylesheets @importing the same sheet only imports once.
... [example from justin fagniani]
... [example swap out styles in a sheet based on a theme]
... We think that's kinda neat. It also complicates the model tho.
... @imported sheet no longer has a parent stylesheet
... So it' snot clear if the wins here are worth complicating the model.
... Interested if people find it compelling, or have customers that might want this behavior. Feedback can be given in issue thread later.

heycam: Is that a common way now for people to dynamically swap styles? To dig into CSSOM, as opposed to setting class names?
... More difficult here, yeah, because lots of shadow trees rather than one instance to change.

This is scribe.perl Revision: 1.154  of Date: 2018/09/25 16:35:56  
Check for newer version at http://dev.w3.org/cvsweb/~checkout~/2002/scribe/

Guessing input format: Irssi_ISO8601_Log_Text_Format (score 1.00)

Succeeded: s/???/ThomasSteiner/
Present: vkuntz Irfan JuanCorona heycam DavidClarke diervo
Found Scribe: bocupp
Inferring ScribeNick: BoCupp
WARNING: No scribe lines found matching previous ScribeNick pattern: <TabAtkins> ...
Found ScribeNick: TabAtkins
ScribeNicks: TabAtkins, BoCupp

WARNING: No meeting title found!
You should specify the meeting title like this:
<dbooth> Meeting: Weekly Baking Club Meeting


WARNING: No meeting chair found!
You should specify the meeting chair like this:
<dbooth> Chair: dbooth


WARNING: No date found!  Assuming today.  (Hint: Specify
the W3C IRC log URL, and the date will be determined from that.)
Or specify the date like this:
<dbooth> Date: 12 Sep 2002

People with action items: 

WARNING: Input appears to use implicit continuation lines.
You may need the "-implicitContinuations" option.


WARNING: IRC log location not specified!  (You can ignore this 
warning if you do not want the generated minutes to contain 
a link to the original IRC log.)