#Shadow DOM Imperative API Brainstorming
##Reduced test case:
<div>
<template shadow> <!-- shadow root -->
<details>
<content></content>
// It is important to declare your variables. | |
(function() { | |
var foo = 'Hello, world!'; | |
print(foo); //=> Hello, world! | |
})(); | |
// Because if you don't, the become global variables. | |
(function() { |
#Shadow DOM Imperative API Brainstorming
##Reduced test case:
<div>
<template shadow> <!-- shadow root -->
<details>
<content></content>
tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.
There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.
Here are official'ish documents to outline the developer community's desires.
Initial: Jun. 28, 2017 / Last Update: Aug. 14, 2017
This is the summary of the discussion happening for HTML Modules at webcoomponents#645.
There appear to be lots of diverse opinions, and I'll try to capture them, summarize and provide here for catching up with the discussion for all. Note that this document should never be considered official, complete or final. If anything is wrong or lost, please let @TakayoshiKochi know.
Photo by Ricardo Gomez Angel on Unsplash
This gist is a collection of common patterns I've personally used here and there with Custom Elements.
These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.