{"id":12733,"date":"2015-11-05T14:50:26","date_gmt":"2015-11-05T19:50:26","guid":{"rendered":"http:\/\/mjtsai.com\/blog\/?p=12733"},"modified":"2015-11-05T14:50:26","modified_gmt":"2015-11-05T19:50:26","slug":"webkit-shadow-dom-api-and-the-state-of-web-type","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2015\/11\/05\/webkit-shadow-dom-api-and-the-state-of-web-type\/","title":{"rendered":"WebKit Shadow DOM API and the State of Web Type"},"content":{"rendered":"<p><a href=\"https:\/\/www.webkit.org\/blog\/4096\/introducing-shadow-dom-api\/\">Ryosuke Niwa<\/a> (<a href=\"https:\/\/news.ycombinator.com\/item?id=10452017\">comments<\/a>):<\/p>\n<blockquote cite=\"https:\/\/www.webkit.org\/blog\/4096\/introducing-shadow-dom-api\/\"><p>Shadow DOM is a part of Web Components, a set of specifications that were initially proposed by Google to enable the creation of reusable widgets and components on the Web. Shadow DOM, in particular, provides a lightweight encapsulation for DOM trees by allowing a creation of a parallel tree on an element called a &ldquo;shadow tree&rdquo; that replaces the rendering of the element without modifying the underlying DOM tree. Because a shadow tree is not an ordinary child of the &ldquo;host&rdquo; element to which it is attached, users of components cannot accidentally poke into it. Style rules are also scoped, meaning that CSS rules defined outside of a shadow tree do not apply to elements inside the shadow tree and rules defined inside the shadow tree do not apply to elements outside of it.<\/p><\/blockquote>\n\n<a href=\"http:\/\/stateofwebtype.com\">Bram Stein<\/a>:\n<blockquote cite=\"http:\/\/stateofwebtype.com\"><p>Up-to-date data on support for type and typographic features on the web.<\/p><\/blockquote>\n<p>Via <a href=\"http:\/\/daringfireball.net\/linked\/2015\/10\/27\/state-of-web-type\">John Gruber<\/a>:<\/p>\n<blockquote cite=\"http:\/\/daringfireball.net\/linked\/2015\/10\/27\/state-of-web-type\">\n<p>It&rsquo;s disappointing how poorly Safari fares here. Mac OS X has had wonderful built-in typographic features for over a decade &mdash; Apple led the industry. But now, on the web, Apple trails the industry.<\/p>\n<\/blockquote>\n<p>See also: <a href=\"http:\/\/mjtsai.com\/blog\/2015\/06\/30\/safari-is-the-new-ie\/\">Safari Is the New IE<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Ryosuke Niwa (comments): Shadow DOM is a part of Web Components, a set of specifications that were initially proposed by Google to enable the creation of reusable widgets and components on the Web. Shadow DOM, in particular, provides a lightweight encapsulation for DOM trees by allowing a creation of a parallel tree on an element [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"","apple_news_api_id":"","apple_news_api_modified_at":"","apple_news_api_revision":"","apple_news_api_share_url":"","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[338,31,346,30,103,134,96,328],"class_list":["post-12733","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css","tag-ios","tag-javascript","tag-mac","tag-safari","tag-typography","tag-web","tag-webkit"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/12733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=12733"}],"version-history":[{"count":1,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/12733\/revisions"}],"predecessor-version":[{"id":12734,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/12733\/revisions\/12734"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=12733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=12733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=12733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}